HTML5画布库,支持基于百分比和固定单位坐标

时间:2014-08-12 11:19:36

标签: javascript html5 canvas

我正在寻找一个2D HTML5画布库,它允许我指定如下的坐标:

X: 5% + 5px
Y: 50% - 20px

当然,这并不意味着他们应该支持这种特定的符号,只要它们允许相同的逻辑。例如:

{
  xPercent: 5,
  xFixed: 5,
  yPercent: 50,
  yFixed: -20
}

没关系。

有很多不错的HTML5画布库,它允许在画布,动画和交互性内对DOM实体(圆形,矩形,图像等)进行类似DOM的操作。到目前为止,我查看了Paper.jsFabric.jsEaselJS

问题是:

据我所知,这些不允许以百分比和固定单位格式指定坐标(同时,如上例所示)

到目前为止,我还没有找到任何支持它的画布库。我的下一步是在现有的2D画布库上实现包装器。在每个窗口调整大小时,此包装器将坐标从百分比+固定格式转换为像素,并将它们传递给画布库。

对我而言,在实现响应式画布应用程序时,这似乎是一个常见问题,因此我很想知道其他人如何处理它。

1 个答案:

答案 0 :(得分:0)

最后,我为此构建了一个自定义解决方案,并在npm上提供。

它支持简单的形状(线条,方框,圆圈),文本和悬停/点击事件。

可以使用演示here