caleb531
commented
11 years ago jCanvas doesn't allow for empty names; you'll have to use some other name.
You can make a Bézier curve draggable in jCanvas by setting its draggable property to true, just like any other layer.
I had draw bezier using mousedown now I need to drag that bezier. Below is my code for making bezier: $canvas.drawBezier({ layer:true, groups: ["mybeizergroups" + totalbeizer], name:"mybeizer_" + totalbeizer, cursors: { // Show pointer on hover mouseover: "pointer", // Show 'move' cursor on mousedown mousedown: "move", // Revert cursor on mouseup mouseup: "pointer" },
strokeStyle: $("#colorselect").val(), strokeWidth: $("#linewidth").html(), x1: spx, y1: spy, // Start point cx1: cp1x, cy1: cp1y, // Control point cx2: cp2x, cy2: cp2y, // Control point x2: spx+150, y2: spy+100, // Start/end point cx3: cp1x+100, cy3: cp1y+100, // Control point cx4: cp2x+100, cy4: 1, // Control point x3: spx+200, y3: spy // Start/end point });
// Retrieve the layer object var line = $canvas.getLayer("mybeizer_" + totalbeizer);
// Create 3 joints (increase the value of n as necessary) var n = 3; for (var i = 1; i <= n; i += 1) {
// Use a circle as each "joint" of the line $canvas.drawArc({ layer: true, draggable: true, data: { jointNumber: i }, fillStyle: $("#colorselect").val(), strokeStyle: $("#colorselect").val(), strokeWidth: 2, x: line["x" + i], y: line["y" + i], radius: parseInt($("#linewidth").html()) + 4,//line.strokeWidth, // Update line when a joint is dragged drag: function(joint) { // Retrieve joint number from its name var j = joint.data.jointNumber;
// Update line coordinates based on joint's position line["x" + j] = joint.x; line["y" + j] = joint.y;
} });
}
below is my code for drag which successfully drag line and other draw: function fn_drag(){ var layers, l; draggable = !draggable; // Toggle draggability of all layers //layers = $canvas.getLayers(); layers = $canvas.getLayers(function(layer) { return (layer.name === ''); }); //layers = $canvas.getLayerGroup(/my/gi); for (l = 0; l < layers.length; l += 1) { $canvas.setLayer(layers[l], { draggable: draggable }); } }