0

I'm in the process of writing a web based drawing app and in the process of migrating it to kineticjs. I'm working from the example given in [1]

The problem I'm having is that I have drawing controls in a table on the left of the canvas and kineticjs isn't happy with that. Previously when I declared my own canvas in html I used:

<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>

and used css to display it as a block, floating left so that it's beside the drawing controls. To move to Kineticjs I removed the canvas element and left the as it was with exactly the same css controlling it. Now in Java script:

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

Kinetic is totally confused. I've copied the example code from [1] and I'm getting a canvas with a triangle and circle but the canvas is way off to the right and the hotspots for mouse events are in the centre of the page, in a different location. So where Kinetic thinks the shapes are and where it's drawing them are two different locations and neither is beside the drawing controls.

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

4

1 に答える 1

0

KineticJSは、実際には「design」要素にキャンバスを作成するため、グローバルキャンバススタイルとdesigndivの子に関連するすべてのスタイルを削除したことを確認してください。

于 2012-08-19T15:07:03.783 に答える