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.
> 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.
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..
> 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..
>> 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, 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;
>> 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.
On Thursday, August 23, 2012 12:44:00 PM UTC-7, Robin Hood wrote:
> 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);
>>> 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.
