我喜欢使用单击以任何所需的 Angular 旋转 Canvas 中的文本，但这里文本以顺时针和反时针方向旋转。我喜欢顺时针方向旋转它到我想要的 Angular 。
代码:
<html>
<head>
<style>
body { margin: 0px; padding: 0px; }
canvas { border: 1px solid #9C9898; }
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-0.2.js">
</script>
<script>
window.onload = function() {
var angle = 0;
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var text = new Kinetic.Text({
x:225,
y: 80,
text: "Simple",
fontSize: 30,
fontFamily: "Calibri",
textFill: "black",
draggable: true
});
text.on("click", function(){
angle=getRandomInt(1,4);
text.transitionTo({
rotation:Math.PI*angle/2,
duration:1
});
});
layer.add(text);
stage.add(layer);
}
function getRandomInt (min, max) {
return (Math.random() * (max - min + 1)) + min;
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
最佳答案
您得到的是随机 Angular 。
你必须获取鼠标位置，然后计算鼠标坐标与文本位置之间的 Angular
看看是否有帮助:
<html>
<head>
<style>
body { margin: 0px; padding: 0px; }
canvas { border: 1px solid #9C9898; }
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.1.js"> </script>
<script>
window.onload = function() {
var angle = 0;
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({x:0,y:0, width:stage.getWidth(), height:stage.getHeight()});
var text = new Kinetic.Text({
x:225,
y: 80,
text: "Simple",
fontSize: 30,
fontFamily: "Calibri",
textFill: "black",
draggable: true
});
rect.on("click", function(){
var mousePos = stage.getMousePosition(); /*gets the mouse position*/
angle = getAngle(text.getX(), text.getY(), mousePos.x, mousePos.y);
text.transitionTo({
rotation: angle,
duration: 1
});
});
layer.add(rect);
layer.add(text);
stage.add(layer);
}
function getAngle (cx, cy, px, py) { /*calculate the angle between two points*/
var x = cx - px;
var y = cy - py;
return Math.atan2(-y, -x);
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
关于javascript - 我需要使用kineticjs单击事件以任何所需的 Angular 旋转 Canvas 中的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12196933/