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

谢谢。

- jrabary

Answer 1

据我所知，KineticJS 中没有“click”事件可以在舞台上使用。你应该使用类似这样的东西：

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

- Артем Хамидуллин

---

方法getContent()不存在。我已经使用了getContainer()来获取实际的画布，然后对其进行了addEventLister监听操作。感谢您帮我理解这部分内容。 - Guilherme David da Costa

Answer 2

这里有一个JSFiddle链接，展示了我正在开发的内容:

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

这是一个使用KineticJS和Sketch.js的绘图工具集。

你需要选择“制作草图”来自由绘制，然后选择“将草图复制到Kinetic”以将你的草图复制到Kinetic舞台上。选择“制作矩形”可以制作一个矩形。

我需要添加代码来提交这个表单，所以当你选择“制作矩形”按钮时，下面是代码：

$('#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", 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;

            });

- robtown

---

你不应该使用 drawLayer.on("mousemove", function (e) {，而是使用 stage.getContainer().addEventListener('mousemove', function (e) {，否则监听器将无法跟随舞台上的鼠标移动。 - aldo.roman.nurena

Answer 3

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

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

<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>

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

- gaborous