我想知道在 Canvas 中添加文本后如何使用鼠标单击将文本动态旋转到我喜欢的任何所需角度？这是一个例子:
<html>
<head>
<style>
body { margin: 0px; padding: 0px; }
canvas { border: 1px solid #9C9898; }
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.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"
});
text.on("click", function(){
angle+=1
text.transitionTo({
rotation:Math.PI*angle/2,
duration:1
});
});
layer.add(text);
stage.add(layer);
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
这里使用的是鼠标点击，每次点击鼠标都会旋转45度，但是我想把文字旋转到任意角度。
最佳答案
引用下面的代码动态旋转 Canvas 中的文本
<html>
<head>
<style>
body { margin: 0px; padding: 0px; }
canvas { border: 1px solid #9C9898; }
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.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"
});
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);
}
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
关于html - 如何使用鼠标单击旋转 Canvas 中的文本？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12194661/