0

我想使用 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 中。可能是什么问题呢？

提前致谢

4

2 回答 2

0

尝试 setDraggable：

image.setDraggable(true);

但是，不得不问，为什么不使用 Kinetic 的画布构造函数呢？如果您直接操作画布，我相信您无法使用此库

于 2012-08-31T15:21:29.840 回答
0

构造函数调用不正确。

尝试

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

对于拖动部分，您可以使您的图层可拖动

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

你可以在这个小提琴中看到一个基本的例子

于 2012-09-03T08:33:54.573 回答