javascript - 使用 kineticjs 进行交互式绘图

Question

我想通过单击和拖动来绘制一个矩形。我怎样才能做到这一点 ？我必须将点击事件侦听器放在哪里？在舞台上还是在层上？我有以下代码，但它不起作用：

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(); 
})

谢谢。

Answer 1

据我所知，在 kineticjs 的舞台上没有“点击”事件。你应该使用这样的东西：

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

Answer 2

链接到显示我一直在努力的小提琴：

http://jsfiddle.net/robtown/SGQq7/22/

它是一组使用 KineticJS 和 Sketch.js 的绘图工具

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

我需要包含代码来发布此内容，因此这是您选择“制作矩形”按钮时的代码：

$('#makeRect').click(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();
                }
            });

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

drawLayer.on("mousedown", 函数 (e) {

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

                    drawLayer.setVisible(false);
                return;

            });

Answer 3

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

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

<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 为“容器”的 div）。您当然需要在使用此代码之前加载 KineticJS 库。