Question

我有以下代码，它完美地运行，除了它将形状从左上角缩放为原点，但我希望它从其中心缩放为原点。应该如何做到这一点，动画将在鼠标悬停时从形状中心开始向上扩展，并从中心再次缩小到原始大小作为原点？

    <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>

Answer 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

如何从中心缩放形状作为原点？

1 个答案: