无法在 html5 中使用 Kineticjs答案

【问题标题】：Cannot use Kineticjs in html5无法在 html5 中使用 Kineticjs
【发布时间】：2012-08-26 08:54:36
【问题描述】：

我想使用 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';
}

但我得到的是这条消息：

“未捕获的类型错误：无法调用未定义的方法‘appendChild’” 指我认为在容器 div 中。可能是什么问题？

提前致谢

【问题讨论】：

标签： html canvas draggable kineticjs

【解决方案1】：

构造函数调用不对。

试试

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

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

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

您可以在fiddle 中看到一个基本示例

【讨论】：

谢谢。我去做。但是还有一种方法可以获取我在 html 中已有的画布，而不是使用舞台对象吗？所以不要做 canvas = document.getElementById("myCanvas"); ctx = canvas.getContext("2d");有没有办法使用相同的逻辑但使用舞台？
你可以使用 Kinetic Shape
好的，我使用了 canvas = layer.getCanvas(); ctx = layer.getContext();并得到了我需要的东西。谢谢

【解决方案2】：

试试 setDraggable：

image.setDraggable(true);

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

【讨论】：

好的，我尝试使用画布构造函数。我在我的 html 中添加了
，并编辑了我的问题以创建画布。我得到的是 "Uncaught TypeError: Cannot call method 'appendChild' of undefined" 。有什么想法吗？