Draggable Box
1,876 views
Skip to first unread message
Tom Brinkman
Aug 16, 2012, 2:46:58 PM8/16/12
to pap...@googlegroups.com
Can Paper.js create a draggable box, similar to this example:
Seems like something Paper.js should be able do this, considering all the other awesome things that it is capable of. However, I didn't see any examples that demonstrated this capability.
Thanks Tom
Alex Blackwood
Aug 16, 2012, 6:41:57 PM8/16/12
to pap...@googlegroups.com
Take a look at the Hit Testing example: http://paperjs.org/examples/hit-testing/
Message has been deleted
Robin Hood
Aug 17, 2012, 11:12:50 AM8/17/12
to pap...@googlegroups.com
Try the demo at http://jsdo.it/_shimizu/62ja
it is what you are looking for i guess.
I can't stress enough that the code is horribly written, so it significantly under performs, so dont use the code as it is.
This is just to give u an idea.. I am using paper for drag and drop purpose as well..
Tom Brinkman
Aug 22, 2012, 11:15:16 PM8/22/12
to pap...@googlegroups.com
My browser (google chrome) was not able to run this example. UGHHH. Sad. Do you have another link?
Robin Hood
Aug 23, 2012, 11:15:15 AM8/23/12
to pap...@googlegroups.com
it run ok on firefox, no problem will write u one simple drag drop example some time today.
Robin Hood
Aug 23, 2012, 3:44:00 PM8/23/12
to pap...@googlegroups.com
Tom, just put the code into html file and it should work just fine.
<html>
<head>
<script>
function init()
{
var canvas = document.getElementById('dynamicCanvas'); //jQuery: $("#dynamicCanvas")[0];Get a reference to the canvas object
paper.setup(canvas); //Create an empty project and a view for the canvas
var hitOptions = { segments: true, stroke: true, fill: true, tolerance: 3 };
//create a rectangle
var rectangle = new paper.Rectangle(new paper.Point(200, 200), new paper.Size(100, 100)); //or (top_left, bottom_right)
var cornerSize = new paper.Size(15, 15); //rounding of edges
var shape = new paper.Path.RoundRectangle(rectangle, cornerSize);
shape.strokeWidth = 3;
shape.strokeColor = '#525252';
shape.fillColor = '#FF6600';
shape.name = 'shape'
paper.view.draw();
tool = new paper.Tool(); //Create a simple drawing tool:
var obj
tool.onMouseDown = function(event) //Define a mousedown and mousedrag handler
{
obj = null;
var hitResult = paper.project.hitTest(event.point, hitOptions);
if (hitResult && hitResult.type == 'fill') //state fill
obj = hitResult.item;
}
tool.onMouseMove = function(event)
{
var hitResult = paper.project.hitTest(event.point, hitOptions);
paper.project.activeLayer.selected = false;
if (hitResult && hitResult.item)
hitResult.item.selected = true;
}
tool.onMouseDrag = function(event)
{
if (obj)
obj.position = event.point;
}
tool.onMouseUp = function(event)
{
}
}
</script>
</head>
<body>
<canvas id="dynamicCanvas" width="800" height="500"></canvas>
<script type="text/javascript" src="js/lib/paper.js"></script>
<input type="button" value="Do event" onclick="init();"/>
</body>
</html>
<html>
<head>
<script>
function init()
{
var canvas = document.getElementById('dynamicCanvas'); //jQuery: $("#dynamicCanvas")[0];Get a reference to the canvas object
paper.setup(canvas); //Create an empty project and a view for the canvas
var hitOptions = { segments: true, stroke: true, fill: true, tolerance: 3 };
//create a rectangle
var rectangle = new paper.Rectangle(new paper.Point(200, 200), new paper.Size(100, 100)); //or (top_left, bottom_right)
var cornerSize = new paper.Size(15, 15); //rounding of edges
var shape = new paper.Path.RoundRectangle(rectangle, cornerSize);
shape.strokeWidth = 3;
shape.strokeColor = '#525252';
shape.fillColor = '#FF6600';
shape.name = 'shape'
paper.view.draw();
tool = new paper.Tool(); //Create a simple drawing tool:
var obj
tool.onMouseDown = function(event) //Define a mousedown and mousedrag handler
{
obj = null;
var hitResult = paper.project.hitTest(event.point, hitOptions);
if (hitResult && hitResult.type == 'fill') //state fill
obj = hitResult.item;
}
tool.onMouseMove = function(event)
{
var hitResult = paper.project.hitTest(event.point, hitOptions);
paper.project.activeLayer.selected = false;
if (hitResult && hitResult.item)
hitResult.item.selected = true;
}
tool.onMouseDrag = function(event)
{
if (obj)
obj.position = event.point;
}
tool.onMouseUp = function(event)
{
}
}
</script>
</head>
<body>
<canvas id="dynamicCanvas" width="800" height="500"></canvas>
<script type="text/javascript" src="js/lib/paper.js"></script>
<input type="button" value="Do event" onclick="init();"/>
</body>
</html>
Ryan Beasley
Aug 24, 2012, 12:40:42 PM8/24/12
to pap...@googlegroups.com
Tom, is there a problem with the Hit Testing example that Alex pointed you at?
~Ryan
Just click on the fill color of a blob and drag it.
~Ryan
Tom Brinkman
Aug 26, 2012, 7:29:46 PM8/26/12
to pap...@googlegroups.com
Sorry, for late reply. Works awesome. Exactly what I hoped was possible with paper.js. You should add this as an tools example.
Tom Brinkman
Aug 26, 2012, 7:30:55 PM8/26/12
to pap...@googlegroups.com
Works great. Exactly what I hoped was possible with paper.js. Thanks.
Reply all
Reply to author
Forward
0 new messages