0

我正在编写一个基于 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
    });

Kinetic完全糊涂了。我已经从 [1] 复制了示例代码，我得到了一个带有三角形和圆形的画布，但是画布离右边很远，鼠标事件的热点位于页面的中心，在不同的位置. 因此，Kinetic 认为形状所在的位置和绘制它们的位置是两个不同的位置，两者都不在绘图控件旁边。

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

4

1 回答 1

0

KineticJS 实际上在您的“设计”元素中创建画布，因此请确保您已删除与全局画布样式和设计 div 的子项相关的所有样式。

于 2012-08-19T15:07:03.783 回答