如何在Kinetic JS中指定Shape的中心

时间:2012-07-30 15:26:01

标签: kineticjs

我创建了一个饼图,并使用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移动到相同的中心点,但它不移动。谢谢,任何帮助将不胜感激。

0 个答案:

没有答案