Javascript 如何在kineticJS中绘制对象的动画路径？
我用kinetic.js绘制了一个矩形，并在圆形路径中设置了动画。在每个动画帧中，我减小它的半径 现在我想画这个矩形的动画路径的线。我不知道如何通过kinetic.js实现这一点。请帮忙 我的密码Javascript 如何在kineticJS中绘制对象的动画路径？,javascript,kineticjs,Javascript,Kineticjs,我用kinetic.js绘制了一个矩形，并在圆形路径中设置了动画。在每个动画帧中，我减小它的半径 现在我想画这个矩形的动画路径的线。我不知道如何通过kinetic.js实现这一点。请帮忙 我的密码 var R = 150; $(document).ready(function () { var stage = new Kinetic.Stage({ container: 'container', width: 500, height: 500 }); var layer
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();
提前感谢。这是如何绘制沿矩形路径的线段的方法： 演示： 首先创建一条将跟踪矩形路径的动能线
var line=new Kinetic.Line({
stroke:"blue"
});
layer.add(line);
var points=line.getPoints();
points.push(X,Y);
line.setPoints(points);
<!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>
原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：350px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：350
});
var layer=新的动能层（）；
阶段。添加（层）；
var线=新的动能线({
分数：[0,0100]，
笔画：“蓝色”，
冲程宽度：2
});
图层。添加（行）；
var rect=新的动能.rect({
x:100，
y:100，
宽度：15，
身高：15，
填充：“黑色”，
笔划：“红色”
});
层。添加（rect）；
var cx=stage.getWidth（）/2；
var cy=stage.getHeight（）/2；
var R=100；
var A=0；
点数=[]；
var anim=新的动能动画(
功能（f）{
R=R-1/100；
A+=Math.PI/180；
var X=cx+R*Math.cos（A）；
变量Y=cy+R*Math.sin（A）；
点。推（X，Y）；
线路.设定点（点）；
矩形集X（X）；
塞蒂直肠（Y）；
},
层）；
anim.start（）；
}); // end$（函数（）{}）；