Question

我想使用Kinetic js库来在画布上的图像中进行拖动和调整大小效果。所以我正在关注这个例子http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

我的html让我们说是这样的：

.....
<div id="container"></div>
.....

然后在加载时我做：

$(document).ready(function() {  
    loadImage()
});

function loadImage(){

imageObj = new Image();      
imageObj.onload  = function(){
    var stage = new Kinetic.Stage("container", 578, 200);
    var layer = new Kinetic.Layer();   

    var x = stage.width / 2 - 200 / 2;
    var y = stage.height / 2 - 137 / 2;

    var image = new Kinetic.Image({
        image: imageObj,
        x: x,
        y: y
    });

    image.draggable(true);

    // add cursor styling
    image.on("mouseover", function(){
        document.body.style.cursor = "pointer";
    });
    image.on("mouseout", function(){
        document.body.style.cursor = "default";
    });
    layer.add(image);
    stage.add(layer);
};
imageObj.src = 'myImage.png';
}

但我得到的是这条消息：

“未捕获的TypeError：无法调用未定义的方法'appendChild'” 我想在容器div中。可能是什么问题？

提前致谢

Answer 1

尝试setDraggable：

image.setDraggable(true);

但是，不得不问，为什么不使用Kinetic的画布构造函数？如果你直接操作画布，我相信你不能使用这个库

Answer 2

构造函数调用不正确。

尝试

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

对于拖动部分，您可以使用

使图层可拖动

var layer = new Kinetic.Layer({draggable: true});

您可以在此fiddle

中看到此基本示例

不能在html5中使用Kineticjs

2 个答案: