Bản vẽ tương tác với các kineticjs

Question

Tôi muốn vẽ hình chữ nhật bằng cách nhấp và kéo. Tôi có thể làm cái này như thế nào ? Tôi phải đặt trình xử lý sự kiện nhấp chuột ở đâu? Trên sân khấu hoặc trên lớp? Tôi có mã sau nhưng không hoạt động:

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

Cảm ơn.

Answer 1

Theo như tôi biết không có sự kiện "nhấp chuột" trên sân khấu trong kineticjs. Bạn nên sử dụng một cái gì đó như thế này:

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

Answer 2

Tôi đã có cùng một vấn đề chính xác, và thực sự là phương pháp của Guilherme hoạt động rất nhiều.

Nhưng có một sự thay thế đơn giản: tạo ra một hình chữ nhật trong suốt (hình chữ nhật Kinetic) kích thước tương tự như vải:

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

Đoạn mã trên sẽ in ra x và vị trí y của chuột khi bạn di chuột nó trên canvas (div có id "vùng chứa"). Tất nhiên bạn cần tải thư viện KineticJS trước khi sử dụng mã này.

Answer 3

Liên kết đến một fiddle cho thấy những gì tôi đã làm việc trên:

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

Đó là một bộ công cụ sử dụng KineticJS và Sketch.js

vẽ Bạn cần phải chọn "làm cho phác thảo "để vẽ tự do và sau đó" sao chép bản phác thảo thành Kinetic "để sao chép bản phác thảo của bạn vào giai đoạn động học. Chọn "Tạo hình chữ nhật" tạo hình chữ nhật.

tôi cần phải có mã để đăng bài này vì vậy đây là mã khi bạn chọn nút "Make Rectangle":.

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

Điều này tạo ra một hình chữ nhật theo chuột cho đến khi bạn bấm vào vải, sau đó nó sẽ rơi xuống hình chữ nhật vào lớp Redlines của sân khấu:

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; 

      });