我创建了一个饼图,并使用drawFunc方法在其中添加渐变,我想将该饼图移动到Kinetic JS舞台的中心,但它会在其他地方旋转。我的代码如下:
var gradientPie = new Kinetic.Shape({
drawFunc: function(context) {
var startingAngle = (60 * Math.PI)/180;
var arcSize = (60 * Math.PI)/180;
var endingAngle = startingAngle + arcSize;
context.beginPath();
context.moveTo(500, 375);
context.arc(500, 375, 250,
startingAngle, endingAngle, false);
context.closePath();
var gradient = context.createLinearGradient(500, 375, 500+250, 375+250);
gradient.addColorStop(0, '#fff');
gradient.addColorStop(0.25, '#99FF99');
gradient.addColorStop(0.5, '#00CC33');
gradient.addColorStop(1, '#009900');
context.fillStyle = gradient;
context.fill();
this.fill(context);
this.stroke(context);
},
stroke: "#006400",
strokeWidth: 1
});
layer.add(gradientPie);
/*
* leave center point positioned
* at the default which is the top left
* corner of the rectangle
*/
var blueRect = new Kinetic.Rect({
x: 500,
y: 375,
width: 100,
height: 50,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
layer.add(blueRect);
stage.add(layer);
// one revolution per 4 seconds
var angularSpeed = Math.PI / 2;
stage.onFrame(function(frame) {
var angleDiff = frame.timeDiff * angularSpeed / 1000;
gradientPie.setOffset(500, 375);
gradientPie.rotate(angleDiff);
blueRect.rotate(angleDiff);
layer.draw();
});
我可以移动蓝色矩形,同样我想将我的gradientPie移动到相同的中心点,但它不移动。谢谢,任何帮助将不胜感激。