Knovajs / HTML5 Canvas - 旋转原点

Question

我已经成功创建了一个按钮，可以顺时针或顺时针旋转图像。但是，此按钮只能使用一次。也就是说，如果我按 CW，我就不能使用 CCW 恢复图像。

有什么想法吗？

$rw = $('#rotate_right');

$rw.on('click', function(event) { event.preventDefault ? event.preventDefault() : event.returnValue = false;

    darthVaderImg.offsetX(img_width / 2); 
    darthVaderImg.offsetY(img_height / 2);
    // when we are setting {x,y} properties we are setting position of top left corner of darthVaderImg.
    // but after applying offset when we are setting {x,y}
    // properties we are setting position of central point of darthVaderImg.
    // so we also need to move the image to see previous result
    darthVaderImg.x(darthVaderImg.x() + img_width / 2);
    darthVaderImg.y(darthVaderImg.y() + img_height / 2);

    darthVaderImg.rotation(90);

    stage.batchDraw();
    export_changes();
});

$rl = $('#rotate_left');
$rl.on('click', function(event) {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    //darthVaderImg.rotate(90);

    darthVaderImg.offsetX(img_width / 2); 
    darthVaderImg.offsetY(img_height / 2);
    // when we are setting {x,y} properties we are setting position of top left corner of darthVaderImg.
    // but after applying offset when we are setting {x,y}
    // properties we are setting position of central point of darthVaderImg.
    // so we also need to move the image to see previous result
    darthVaderImg.x(darthVaderImg.x() + img_width / 2);
    darthVaderImg.y(darthVaderImg.y() + img_height / 2);

    darthVaderImg.rotation(-90);

    stage.batchDraw();
    export_changes();
});`

Answer 1

rotation 方法将设置形状的当前角度。如果你需要旋转更多，你可以使用这个：

var oldRotation = node.rotation();
node.rotation(oldRotation + 90);

或者只是：

node.rotate(90);

Answer 2

根据@lavrton 的回答，这是一个有效的片段。我猜你需要注意旋转点——这对我来说很容易，因为我使用了楔子。请参阅按钮单击事件中的简短代码，以了解如何操作。

// add a stage
var s = new Konva.Stage({
  container: 'container',
  width: 800,
  height: 200
});

// add a layer        
var l = new Konva.Layer();
s.add(l);

    
// Add a green rect to the LAYER just to show boundary of the stage.
var green = new Konva.Rect({stroke: 'lime', width: 799, height: 199, x: 0, y: 0});
l.add(green);

// add a circle to contain the wedge
var circle = new Konva.Circle({
      x: s.getWidth() / 2,
      y: s.getHeight() / 2,
      radius: 70,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 4
    });
l.add(circle);

// add the wedge - used as our rotation example
var w = new Konva.Wedge({
      x: s.getWidth() / 2,
      y: s.getHeight() / 2,
      radius: 70,
      angle: 60,
      fill: 'lime',
      stroke: 'black',
      strokeWidth: 4,
      rotation: -120
    });
l.add(w);

l.draw(); // redraw the layer it all sits on.

// wire up the buttons
var oldAngle = 0;
$( document ).ready(function() {
$('#plus90').on('click', function(e){
  oldAngle = w.rotation();
  w.rotate(90);
  $('#info').html('Rotation is ' + oldAngle + ' + 90 = ' + w.rotation())
  l.draw();
})

$('#minus90').on('click', function(e){
  oldAngle = w.rotation();
  w.rotate(-90);
  $('#info').html('Rotation is ' + oldAngle + ' - 90 = ' + w.rotation())
  l.draw();
})

  $('#info').html('Initial rotation = ' + w.rotation())

});

#container {
  border: 1px solid #ccc;
}
#info {
height: 20px;
border-bottom: 1px solid #ccc;
}
#hint {
font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.3/konva.min.js"></script>


<body>
<div id='hint'>Hint: green is stage, red circle is static, lime wedge rotates.Click the buttons!<br/>
Note the initial rotation set on the creation of the wedge.
</div>

<div id='info'>Info:</div>
<div id='ctrls'>
<button id='minus90'>Rotate -90 degrees</button>
<button id='plus90'>Rotate +90 degrees</button>
</div>


  <div id="container"></div>
</body>

Knovajs / HTML5 Canvas - 旋转原点

Knovajs / HTML5 Canvas - Rotation origin

html

canvas

konvajs