无法在 html5 中使用 Kineticjs

Posted 2023-05-08

【中文标题】无法在 html5 中使用 Kineticjs

【英文标题】：Cannot use Kineticjs in html5

【发布时间】：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 中。 可能是什么问题？

提前致谢

【参考方案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" 。有什么想法吗？