Knovajs/HTML5画布 - 旋转起源

我已经成功创建了一个按钮，它可以顺时针或顺时针旋转图像。但是，此按钮只能使用一次。即如果我按CW，我不能使用CCW将图像还原。Knovajs/HTML5画布 - 旋转起源

任何想法？

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

来源

2017-06-16 deanhodges

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

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

或者只是：

node.rotate(90);

来源

2017-06-16 14:34:22 lavrton

精湛。这样可行。任何想法改变图像（不是方形）并更新它的旋转偏移到中心？即在风景中我已经制定了中心。其中，当按旋转它第一次工作。但再次按旋转它会出错。 – deanhodges

基于@ 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>

来源

2017-06-16 15:18:31

Knovajs/HTML5画布 - 旋转起源

回答

相关问题