Question

我正在做一个画布应用程序, 我需要能够创建位图、线条、组, 并管理点击事件。

我试过了:

kinetic-v3.9.6.js
easeljs-0.4.2.min.js

这些工具非常好,但它们没有办法获得一组位图和线条的宽度。

//init a image
var b = new Bitmap(...);
b.x ...
b.src ...

var l = Line(...);
l.x ...
l.y ...

//init group or layer or something like that
var g = Group(...);
g.add(b);
g.add(l);

var w = g.width;

这不管用

现在,我正在考虑黑进easeljs-0.4.2.min.js 来完成这个任务,因为它是连接 as3/as2 简单代码的良好起点,但我不确定这是否是一个好主意。

我真的很喜欢闪电工具显示物体的方式, 所以如果你知道一些工具,请告诉我。

Answer 1

您可以/ 应该使用 SVG 来描述您描述的内容。

Demo: http://jsfiddle.net/mNAd3/

var svgNS =  http://www.w3.org/2000/svg ,
    svg   = document.body.appendChild(document.createElementNS(svgNS, svg ));

var l = document.createElementNS(svgNS, line );
line.setAttribute( x1 ,10); line.setAttribute( y1 ,50);
line.setAttribute( x2 ,30); line.setAttribute( y2 ,150);

var g = svg.appendChild(document.createElementNS(svgNS, g ));
g.appendChild(l);

var bbox = g.getBBox();
console.log(bbox);
// SVGRect:
//   height: 100
//   width: 20
//   x: 10
//   y: 50

var w = bbox.width;

请注意,您需要确保您的元素在屏幕上可见(将 SVG 添加到文档中,将组添加到 SVG 中),以计算捆绑框。

I 故意不包含创建图像的例子, 因为使用无同步装入的资源, 您需要设置一个 < code>load 处理器, 等待图像加载, 我不想使演示与这些细节复杂化。

由于 SVG 是 remaine-mode 图形 API , 它对对象的大小有概念, 并允许它们跟踪和处理鼠标事件。 HTML5 画布的情况并非如此( 因为它是一个 immeterte-mode 图形 API 。 )

Demo: http://jsfiddle.net/mNAd3/

友情链接