Kinetic JS将帆布放在错误的地方

Question

我正在编写一个基于Web的绘图应用程序，并正在将其迁移到kineticjs。我正在使用[1]

中给出的例子

我遇到的问题是我在画布左侧的表格中有绘图控件，而kineticjs对此并不满意。以前当我使用html声明我自己的画布时：

<div id="design">
  <canvas id="canvas" width="600" height="250" style="border:1px solid black;">
    <p>Sorry: Browser does not support Graphics Canvas</p>
  </canvas>
</div>

并使用css将其显示为一个块，向左浮动，使其位于绘图控件旁边。为了移动到Kineticjs，我删除了canvas元素并保持原样与完全相同的css控制它。现在用Java脚本：

var stage = new Kinetic.Stage({
      container: "design",
      width: 578,
      height: 200
    });

动力学完全混淆了。我已经复制了[1]中的示例代码，我得到了一个带有三角形和圆形的画布，但画布向右移动，鼠标事件的热点位于页面的中心，位于不同的位置。因此，Kinetic认为形状是什么以及它们在哪里绘制它们是两个不同的位置，并且两者都不在绘图控件旁边。

[1] http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

Answer 1

KineticJS实际上在你的'design'元素中创建了canvas，所以请确保你已经删除了与全局画布样式和设计div子元素相关的所有样式。