我用kinetic.js绘制了一个矩形，并以圆形路径对其进行了动画处理。在每个动画帧中，我减小它的半径。
现在我想绘制这个矩形的动画路径的线。我不知道如何通过kinetic.js 做到这一点。请帮忙!
我的代码
var R = 150;
$(document).ready(function () {
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 10,
y: 10,
width: 100,
height: 100,
fill: 'black',
stroke: 'red'
});
layer.add(rect);
stage.add(layer);
var centerX = stage.width() / 2;
var anim = new Kinetic.Animation(
function (f) {
var cX = stage.width() / 2;
var cY = stage.height() / 2;
R = R - 1 / 1000;
var X = cX + R * Math.cos(f.time / 1000);
var Y = cY + R * Math.sin(f.time / 1000);
rect.setX(X);
rect.setY(Y);
}, layer);
anim.start();
});
以下是代码:http://jsfiddle.net/tanvirgeek/n8z8N/
提前致谢。
最佳答案
这是绘制沿着矩形路径的线段的方法:
演示:http://jsfiddle.net/m1erickson/Cbq2c/
首先创建一条 Kinetic.Line 来追踪矩形的路径
var line=new Kinetic.Line({
stroke:"blue"
});
layer.add(line);
第二当您在动画循环中生成新的 XY 时，将该 XY 添加到线条的点
var points=line.getPoints();
points.push(X,Y);
line.setPoints(points);
重要警告!此动力学动画循环会产生不良的暂停“交错”。这种交错在 Chrome 中很小，在 IE 中很明显，在 FireFox 中则很严重。这似乎是由于 Kinetic.Line 无法平滑地添加+绘制数千个数据变化点，因此我建议使用常规 html5 canvas 和 requestAnimationFrame 来实现您的效果。
<!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-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var line=new Kinetic.Line({
points:[0,0,100,100],
stroke:"blue",
strokeWidth:2
});
layer.add(line);
var rect = new Kinetic.Rect({
x: 100,
y: 100,
width: 15,
height: 15,
fill: 'black',
stroke: 'red'
});
layer.add(rect);
var cx=stage.getWidth() / 2;
var cy=stage.getHeight()/2;
var R=100;
var A=0;
points=[];
var anim = new Kinetic.Animation(
function (f) {
R = R - 1 / 100;
A += Math.PI/180;
var X = cx + R * Math.cos(A);
var Y = cy + R * Math.sin(A);
points.push(X,Y);
line.setPoints(points);
rect.setX(X);
rect.setY(Y);
},
layer);
anim.start();
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
关于javascript - 如何在kineticJS中绘制对象的动画路径？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21496580/