Question

我一直在尝试使用Kineticjs 4.3.3。创建一个图形图像，可以拖过父div，但如果父div在其样式属性下设置了scalling，则它将不起作用（示例提供http://jsfiddle.net/kreavie/MZSE9/）。有没有人有任何想法如何在先前设置scalling时拖动工作？

谢谢， krlib

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=9">
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
    <script type="text/javascript">


 window.onload = function () {

        var par = document.getElementById('frame');
        var canvas = document.createElement('div');
        canvas.id = "canvas1";
        par.appendChild(canvas);


        var stage = new Kinetic.Stage({
            container: 'canvas1',
            width: 500,
            height: 500
        });

        var layer = new Kinetic.Layer();
        var triangle = new Kinetic.Polygon({
            stroke: "red",
            strokeWidth: 4,
            points: [60, 100, 90, 100, 90, 140],
            draggable: true
        });

        layer.add(triangle);
        stage.add(layer);


    }
    </script>

</head>
<body >

     <div id="frame" style="width: 200px; height: 200px; -ms-transform: scale(0.420091);">
                  </div>

</body>
</html>

Answer 1

请参阅：http://jsfiddle.net/MZSE9/2/

您的对象是canvas元素的本地对象，而不是应用缩放的另一个div。

如果要缩放对象，图层或整个舞台，只需执行以下操作：

 shape.setScale(xAmount, yAmount);
 stage.setScale(xAmount, yAmount);
 layer.setScale(xAmount, yAmount);

Kineticjs Draggable不能与-ms-transform一起使用

1 个答案: