0

次のコードがありますが、これは左上隅から原点として形状をスケーリングすることを除いて、完全に正常に機能しますが、その中心から原点としてスケーリングする必要があります。どのようにすればよいでしょうか。アニメーションは、マウスが置かれたときに形状の中心から拡大し始め、原点として中心から再び元のサイズに縮小しますか?

    <div id="hex-menu"></div>
    <script src="js/kinetic.min.js" charset="utf-8"></script>
    <script defer="defer" type="text/javascript">
        function makeHex(x, y, fill) {
            var hex = new Kinetic.Shape({
                x: x,
                y: y,
                fill: fill,
                // a Kinetic.Canvas renderer is passed into the drawFunc function
                drawFunc: function (canvas) {
                    var context = canvas.getContext();
                    context.save();
                    context.translate(x, y);
                    context.beginPath();
                    context.moveTo(0.1, 51.9);
                    context.bezierCurveTo(0.1, 43.6, 4.6, 35.8, 11.9, 31.6);
                    context.lineTo(61.0, 3.3);
                    context.bezierCurveTo(68.2, -0.9, 77.2, -0.9, 84.4, 3.3);
                    context.lineTo(133.6, 31.6);
                    context.bezierCurveTo(140.8, 35.8, 145.3, 43.6, 145.3, 52.0);
                    context.lineTo(145.3, 108.7);
                    context.bezierCurveTo(145.3, 117.1, 140.8, 124.8, 133.6, 129.0);
                    context.lineTo(84.4, 157.4);
                    context.bezierCurveTo(77.2, 161.5, 68.2, 161.5, 61.0, 157.4);
                    context.lineTo(11.9, 129.0);
                    context.bezierCurveTo(4.6, 124.8, 0.1, 117.0, 0.1, 108.7);
                    context.lineTo(0.1, 51.9);
                    context.closePath();
                    canvas.fillStroke(this);
                    context.restore();
                }
            });
            return hex;
        }
        function Zoom(node) {
            var tween = new Kinetic.Tween({
                node: node,
                duration: 0.5,
                scaleX: 1.2,
                scaleY: 1.2
            });
        return tween;
        }
        function AddAnimation(node, tween) {
            node.on('mouseover', function() {
                tween.play();
            });
            node.on('mouseleave', function() {
                tween.reverse();
            });
        }
        var stage = new Kinetic.Stage({
            container: 'hex-menu',
            width: 513,
            height: 484
        });
        var shapesLayer = new Kinetic.Layer();
        var home = makeHex(80, 90, 'rgb(19, 217, 209)', 50);
        shapesLayer.add(home);
        stage.add(shapesLayer);
        var zoomHome = Zoom(home);
        AddAnimation(home, zoomHome);
    </script>
4

1 に答える 1

1

offset三角法を使用して、プロパティを形状の中心に設定する必要があります。デフォルトKinetic.CircleでKinetic.Ellipseは、 と は中央にオフセットされていますが、残りの形状は左上にオフセットされています。

この例では、オフセットを幅と高さの半分 (50 と 25) に設定していますhexが、中心点を取得するには、オブジェクトに対していくつかの計算を行う必要があります。

var rect = new Kinetic.Rect({
  x: 239,
  y: 75,
  width: 100,
  height: 50,
  fill: 'green',
  stroke: 'black',
  strokeWidth: 4,
  offset: {x: 50, y: 25}
});

または、メソッドgetOffset()とsetOffset()

http://kineticjs.com/docs/Kinetic.Shape.html#getOffset http://kineticjs.com/docs/Kinetic.Shape.html#setOffset

JSFIDDLE

于 2013-09-10T14:08:26.800 に答える