Question

以下是我的代码。

var canvas = document.getElementById（“siddhiCanvas”）;

if (canvas.getContext) 
{

    var ctx = canvas.getContext('2d');
        //Modify the value of x & y and see the effect
        ctx.scale(2, 2);
        for (i = 0; i < 1000; i += 10) {
            ctx.moveTo(0, i);
            ctx.strokeStyle = "#D8D8D8";
            ctx.lineTo(canvas.width, i);
            ctx.stroke();

        }
        for (i = 0; i < 1000; i += 10) {
            ctx.moveTo(i, 0);
            ctx.strokeStyle = "#D8D8D8";
            ctx.lineTo(i, canvas.height);
            ctx.stroke();
        }

    }

    canvas.style.border = "black 1px solid"; 



     var ctx=canvas.getContext("2d");
     var $canvas=$("#siddhiCanvas");
     var canvasOffset=$canvas.offset();
     var offsetX=canvasOffset.left;
     var offsetY=canvasOffset.top;

     var image1=new Image();
     image1=document.getElementById("arrow").src;

     var $arrow=$("#arrow");
     var $canvas=$("#siddhiCanvas");


     $arrow.draggable( { 
            cursor: 'move',
            helper: 'clone'

          } );

     $arrow.data("image",image1); // key-value pair


     $canvas.droppable({
            drop:dragDrop,
     });


     function dragDrop(e,ui){
            var element=ui.draggable;
            var data=element.data("url");
            var x=parseInt(ui.offset.left-offsetX);
            var y=parseInt(ui.offset.top-offsetY);
            ctx.drawImage(element.data("image"),x-1,y);
        }

上面的代码在document.onready函数中，而html部分包含canvas标记和图像。

如前所述，我只能拖动一次，一旦图像掉落到目标，我无法进一步移动它。我也在画布上绘制笔画，当我拖动图像时，它会移到这些线的后面。任何人都可以帮助我......提前致谢。

Answer 1

您可以结合使用jQueryUI和KineticJS将图像元素从工具栏拖动到Kinetic.Stage。

演示：http://jsfiddle.net/m1erickson/LuZbV/

步骤＃1 使用jQueryUI使工具栏中的图像元素可拖动：

// make the toolbar image draggable

$house.draggable({
    helper:'clone',
});

步骤＃2 在可拖动图像元素

上设置数据有效负载

// set the data payload

$house.data("url","house.png"); // key-value pair
$house.data("width","32"); // key-value pair
$house.data("height","32"); // key-value pair
$house.data("image",image1); // key-value pair

第3步使Kinetic容器成为dropzone

// make the Kinetic Container a dropzone

$stageContainer.droppable({
    drop:dragDrop,
});

步骤＃4 当用户删除可拖动的图像元素时，使用其数据有效负载创建Kinetic.Image。

// hangle a drop into the Kinetic container
function dragDrop(e,ui){

    // get the drop point
    var x=parseInt(ui.offset.left-offsetX);
    var y=parseInt(ui.offset.top-offsetY);

    // get the drop payload (here the payload is the image)
    var element=ui.draggable;
    var data=element.data("url");
    var theImage=element.data("image");

    // create a new Kinetic.Image at the drop point
    // be sure to adjust for any border width (here border==1)
    var image = new Kinetic.Image({
        name:data,
        x:x,
        y:y,
        image:theImage,
        draggable: true
    });
    layer.add(image);
    layer.draw();
}

一旦将图像拖放到目标上并且拖动仅发生一次，则无法拖动图像

1 个答案: