Javascript 使用kineticjs进行交互式绘图

我想用点击拖动的方式画一个矩形。我该怎么做？我必须将单击事件侦听器放在哪里？在舞台上还是在舞台上？我有以下代码，但不起作用：

stage = new  Kinetic.Stage({...})
layer = new Kinetic.Layer({...})

stage.add(layer)

stage.on('click', function() {
   var pos  = stage.getMousePosition();
   var rect = new Kinetic.Rect({
       x: pos.x,
       y: pos.y,
       width: 10,
       height: 10,
   });
   layer.add(rect);
   layer.draw(); 
})

---

谢谢。

据我所知，kineticjs的舞台上没有“点击”活动。您应该使用如下内容：

stage.getContainer().addEventListener('mousedown', function(evt) {});

---

我遇到了完全相同的问题，事实上Guilherme的方法非常有效

但有一个简单的替代方案：创建一个与画布大小相同的透明矩形（动态矩形）：

<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    function writeMessage(messageLayer, message) {
        var context = messageLayer.getContext();
        messageLayer.clear();
        context.font = '18pt Calibri';
        context.fillStyle = 'black';
        context.fillText(message, 10, 25);
    }

    var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 200
    });
    var shapesLayer = new Kinetic.Layer();
    var messageLayer = new Kinetic.Layer();

    var rect = new Kinetic.Rect({
        x:0,
        y:0,
        width:stage.getWidth(),
        height:stage.getHeight(),
        stroke:0
    });

    rect.on('mousemove', function() {
        var mousePos = stage.getMousePosition();
        var x = mousePos.x;
        var y = mousePos.y;
        writeMessage(messageLayer, 'x: ' + x + ', y: ' + y);
    });


    stage.getContainer().addEventListener('mouseout', function(evt) {
        writeMessage(messageLayer, '');
    });

    shapesLayer.add(rect);

    stage.add(shapesLayer);
    stage.add(messageLayer);
}//]]>  
</script>

//

---

上面的代码将在鼠标悬停在画布上时打印鼠标的x和y位置（id为“container”的div）。在使用此代码之前，您当然需要加载KineticJS库。

链接到一个小提琴，显示我一直在做的工作：

这是一套使用KineticJS和Sketch.js的绘图工具

您需要选择“绘制草图”以徒手绘制，然后选择“将草图复制到动力学”以将草图复制到动力学阶段。选择“制作矩形”制作矩形

我需要包含发布此消息的代码，因此以下是您选择“生成矩形”按钮时的代码：

$（'#makeRect'）。单击（函数（e）{

这将创建一个跟随鼠标的矩形，直到您单击画布，然后将该矩形放置到舞台的红线层中：

drawLayer.on（“鼠标向下”，函数（e）{

//for（var f=0；f<1；f++）{
//警报（如长度）；
if（makeRect）{
addToRedlineLayer（e.x，e.y）；
}
//}
followRect.setX（-200）；
drawLayer.setVisible（假）；
返回；
});

方法

getContent（）

不存在。我使用

getContainer（）

获取实际画布，然后

addEventLister

。+1有助于理解这一部分。你不应该使用

drawLayer.on（“mousemove”，function（e）{

但是

stage.getContainer（）。addEventListener（'mousemove'，function（e） {

，否则侦听器将不会在舞台上跟随鼠标。

             followRect = new Kinetic.Rect({
                width: 120,
                height: 40,
                x: -200,
                y:-200,                    
                stroke: 'red',
                strokeWidth: 3
            });
            drawLayer.setVisible(true);

            drawLayer.add(followRect);
            drawLayer.draw();
            makeRect = true;
            drawLayer.on("mousemove", function (e) {
                if (makeRect) {
                    followRect.setX(e.x+5);
                    followRect.setY(e.y+5);
                    drawLayer.draw();
                }
            });

                //for (var f = 0 ; f < 1; f++) {
                //alert(e.length);
                if (makeRect) {
                    addToRedlineLayer(e.x, e.y);
                }
                //}
                    followRect.setX(-200);

                    drawLayer.setVisible(false);
                return;

            });