我正在使用 raphaeljs 在 Canvas 上创建一系列图表,当每个新图表添加到 Canvas 时,我想对以前的图表进行一系列更改(使它们变小并移动它们)-但这些动画似乎不起作用。我已经能够为笔划设置动画,所以我猜这至少是可能的,但显然我的语法不起作用。这是我的代码:
var chartArray = [];
Raphael.fn.pieChart = function (cx, cy, r, rin, graphArray, stroke) {
var groupName;
var paper = this,
rad = Math.PI / 180,
chart = this.set();
function sector(cx, cy, r, startAngle, endAngle, params) {
return paper.path([ ... ]).attr(params); //creates each slice of the pie chart
}
...
chartArray.push(chart);
return chart;
}
$('#clicker').click(function(){
raphCanvas.pieChart(125, 125 + (graphID*10), 100, 50, graphArray, "#fff");
chartArray[0][j].animate({stroke: "#000"}, 2000); //works to set the stroke of each item in the set to black
chartArray[0].animate({x: 0}, 2000); //does not work to move the x position of the set
});
最佳答案
在 raphael 中,你不能只为“x”属性设置动画,你必须使用翻译,如下所示:
var moveX = 100;
var moveY = 0;
view.animate({translation : (moveX)+" , "+(moveY)},500,function(){
console.log("finished");
});
关于javascript - canvas/raphael.js - 在 Canvas 上动画对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7996521/