코드 :

이

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 500, 
    height: 500 
}); 

var layer = new Kinetic.Layer({ 
    width: 400, 
    height: 400 
}); 

var rect = new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: 400, 
    height: 300, 
    fill: '#00D2FF', 
    stroke: 'black', 
    strokeWidth: 5 
}); 

layer.add(rect); 
stage.add(layer); 

$(document).on('click', '#rotateBtn', function() { 
    var w = layer.getWidth(), 
     h = layer.getHeight(); 
    layer.setOffset(w/2, h/2); 
    layer.setPosition(w/2, h/2); 
    layer.rotateDeg(90); 
    layer.draw(); 
}); 

var points = [], 
    drawing = false; 

stage.on('mousedown', function() { 
    drawing = true; 

    var pos = stage.getMousePosition(); 
    points.push([pos.x, pos.y]); 

    var line = new Kinetic.Line({ 
     id: 'line', 
     points: [ 
      [pos.x, pos.y], 
      [pos.x + 1, pos.y + 1] 
     ], 
     stroke: 'white', 
     strokeWidth: 5, 
     lineCap: 'round', 
     lineJoin: 'round' 
    }); 

    layer.add(line); 
    layer.drawScene(); 
}); 

stage.on('mousemove', function() { 
    if (!drawing) { 
     return; 
    } 

    // Remove previous line 
    layer.get('#line').remove(); 

    var pos = stage.getMousePosition(); 
    points.push([pos.x, pos.y]); 

    // Redraw line 
    var line = new Kinetic.Line({ 
     id: 'line', 
     points: points, 
     stroke: 'white', 
     strokeWidth: 5, 
     lineCap: 'round', 
     lineJoin: 'round' 
    }); 
    layer.add(line); 
    layer.drawScene(); 
}); 

stage.on('mouseup', function() { 
    drawing = false; 
    points = []; 
});

출처

2013-08-09 akuma

도 회전 한 후, 운동은 여전히 당신에게 않은 회전 마우스를 줄 것이다 당신이 stage.getMousePosition을 요구하고 무대가 회전되지 않기 때문이다

조정합니다.

layer.getMousePosition과 같은 메소드가 없으므로이를 만들어야합니다.

enter image description here

당신이 당신의 층을 90도 회전하면, 당신은 또한 단계의 마우스가 90도에 의해 좌표를 회전해야합니다.

각 MouseMove 이벤트와 함께이 수학을하고있을 것이기 때문에

// get the unrotated mouse position from Kinetic 

    var pos=stage.getMousePosition(); 

    // rotate that point to match the layer rotation 

    var x1 = rotationX 
       + (pos.x-rotationX)*rotationCos 
       + (pos.y-rotationY)*rotationSin; 

    var y1 = rotationY 
       + (pos.y-rotationY)*rotationCos 
       - (pos.x-rotationX)*rotationSin;

, 성능을 극대화하기 위해 회전 값을 미리 계산해야합니다 :

을 여기

는 레이어 회전과 일치하는 단계의 마우스 위치를 회전 방법 또한

// reset the current rotation information 

    function setRotation(degrees){ 
     var radians=layer.getRotation(); 
     rotationX=layer.getOffsetX(); 
     rotationY=layer.getOffsetY(); 
     rotationCos=Math.cos(radians); 
     rotationSin=Math.sin(radians); 
    }

, 조금 주제에서 벗어난 질문에,하지만 ...

대신 모든 MouseMove 이벤트에 새 줄을 다시/제거 작업을 수행 할 수 있습니다 " http://jsfiddle.net/m1erickson/cQATv/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:400px; 
    height:400px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 500, 
     height: 500 
    }); 
    var layer = new Kinetic.Layer({width:400,height:400}); 
    stage.add(layer); 


    // vars to save the current rotation information 
    var rotationX; 
    var rotationY; 
    var rotationCos; 
    var rotationSin; 
    setRotation(0); 


    var rect = new Kinetic.Rect({ 
     x: 0, 
     y: 0, 
     width: 400, 
     height: 300, 
     fill: '#00D2FF', 
     stroke: 'black', 
     strokeWidth: 5 
    }); 

    layer.add(rect); 
    stage.add(layer); 

    $(document).on('click', '#rotateBtn', function() { 
     var w = layer.getWidth(), 
      h = layer.getHeight(); 

     layer.setOffset(w/2, h/2); 
     layer.setPosition(w/2, h/2); 
     layer.rotateDeg(90); 
     layer.draw(); 

     // set the info necessary to un-rotate the mouse position 
     setRotation(layer.getRotationDeg()) 

    }); 

    var points = [], 
     drawing = false; 

    stage.on('mousedown', function() { 
     drawing = true; 

     // get the rotated mouse position 
     pos=getPos(); 
     points.push([pos.x, pos.y]); 

     var line = new Kinetic.Line({ 
      id: 'line', 
      points: [ 
       [pos.x, pos.y], 
       [pos.x + 1, pos.y + 1] 
      ], 
      stroke: 'white', 
      strokeWidth: 5, 
      lineCap: 'round', 
      lineJoin: 'round' 
     }); 

     layer.add(line); 
     layer.drawScene(); 
    }); 

    stage.on('mousemove', function() { 
     if (!drawing) { 
      return; 
     } 

     // Remove previous line 
     layer.get('#line').remove(); 

     // get the rotated mouse position 
     var pos = getPos(); 
     points.push([pos.x, pos.y]); 

     // Redraw line 
     var line = new Kinetic.Line({ 
      id: 'line', 
      points: points, 
      stroke: 'white', 
      strokeWidth: 5, 
      lineCap: 'round', 
      lineJoin: 'round' 
     }); 
     layer.add(line); 
     layer.drawScene(); 

    }); 

    stage.on('mouseup', function() { 
     drawing = false; 
     points = []; 
    }); 


    // reset to the current rotation information 
    function setRotation(degrees){ 
     var radians=layer.getRotation(); 
     rotationX=layer.getOffsetX(); 
     rotationY=layer.getOffsetY(); 
     rotationCos=Math.cos(radians); 
     rotationSin=Math.sin(radians); 
    } 


    // rotate the stage mouse position 
    // to match the layer rotation 
    function getPos(x,y){ 

     // normal space, no adjustment necessary 
     if(rotationCos==0){return;} 

     var pos=stage.getMousePosition(); 

     var x1 = rotationX 
        + (pos.x-rotationX)*rotationCos 
        + (pos.y-rotationY)*rotationSin; 

     var y1 = rotationY 
        + (pos.y-rotationY)*rotationCos 
        - (pos.x-rotationX)*rotationSin; 

     return({x:x1,y:y1}); 
    } 


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <button id="rotateBtn">rotate</button> 
    <div id="container"></div> 
</body> 
</html>

출처

2013-08-10 20:12:52 markE

감사합니다 :

// set the points property of the line to your updated points array line.setPoints(points);

는 다음 코드와 바이올린의 "기존 라인을 재활용! 이것은 매우 효과적입니다. 이전에 line.setPoints (포인트)를 사용했지만 도면이 약간 지연됩니다. 나는 이유를 모른다. – akuma

KineticJS 마우스 위치는 파란색 상자에 무언가를 그리는

코드 :

답변

관련 문제