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

据我所知，没有＆＃34;点击＆＃34;在kineticjs舞台上的活动。你应该使用这样的东西：

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

Answer 2

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

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

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

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

我需要包含代码来发布这个，所以这里是你选择“Make Rectangle”按钮时的代码：

$（'＃makeRect'）。点击（功能（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”，function（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库。

与kineticjs交互式绘图

3 个答案: