关于浏览器端 Canvas Hit Region API 和结构化的图形

原先的计划是 Quamolit 项目在 Canvas 上模拟 DOM 来写应用,
本身的实现会丧失大量 DOM 的好处, 并且力有不逮, 但着重改善几个方面:

• 每一个元素有自身的生命周期, 而生命周期容易绑定动画, 以及生成有视差和延时的渐变

• 元素经过 id 来标识, 那么当元素从树的一个位置移动到另外一个, 也能由框架生成渐变

目前以及尝试过的部分看来, 效果不会太好, 代码生成的插值, 太单调了
另外, 涉及到 transform 的图形的控制, 带来了新的麻烦:

• transform 以后点击位置难以计算

• transform 是经过 Canvas 的机制完成的, 元素在树的层级之间跳跃是难以插值

我下面先说这两个问题:

Hit Region 来计算位置

上边的第一个 transform 后的位置, 须要实现事件系统的话就须要能拿到正确的位置
实际上我想不出来, 幸亏回过神来去 StackOverflow 问了一下, 拿到了答案:

http://stackoverflow.com/a/28762735/883571

一个是 ctx.isPointInPath() 这个 API, 能够原来判断点是否落在当前渲染的 Path 中
可是这个比较难用, 并且有事件时不大可能会渲染一个判断一次的

若是是我本身来设计 API, 我固然是但愿 Canvas 每一个像素点上能直接拿到对应的标识
后来我在 W3C 的规范里看到了, 并且答案原来也提到, 有 Hit Region 能够用:

http://www.w3.org/TR/2dcontext/#hit-regions
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/addHitRegion

canvas.addEventListener("mousemove", function(event){
  if(event.region) {
    alert("ouch, my eye :(");
  }
});

// eyes
ctx.beginPath();
ctx.arc(70, 80, 10, 0, 2 * Math.PI, false);
ctx.arc(130, 80, 10, 0, 2 * Math.PI, false);
ctx.fill();
ctx.addHitRegion({id: "eyes"});

这个 API 容许在像素点设置 id, 设置鼠标图片, 以及其余一些选项
问题在于 API 只有 Chrome Firefox 实现, 而 Chrome 须要在 chrome://flags 手动开启
做为 Canvas Exprimental API 存在, 我在 GitHub 搜了, 也极少有项目用到

顺着这个 API 的思路日后想, 当咱们给 Canvas 设计一套相似 DOM 的结构之后
经过 Region 返回的标识, 咱们就能把像素上的编辑映射到对应的元素
那么, 几乎可以从新实现一套 DOM, 更重要的是, 绕过了 DOM 和 CSS
好处是, 咱们的元素很是轻量级, 不受 Layout reflow 约束, 并且能任意绘图
也能够想见没有 CSS Box Model 写代码会挺痛苦.. 不过却是值得尝试

Transform 之后的插值渐变

好比设计这样一个结构, 做为我在 Quamolit 设计的标签树:

RootElement
  ElementA
    ScaleH
      ElementI
  ElementB
   <PlaceC>

ElementI 在 ScaleH 当中, 最好是用 ctx.save() ctx.restore() 这套机制
在 ElementI 当中就不须要手工计算甚至复杂图形, 就可以完成 transform 了
可是, 假如 ElementI 须要渐变到 PlaceC 呢, 中间怎样插值?
直接的办法是拿到 ElementI 所有的 transform, 而后计算

但是问题可能很复杂, 这里树的结构简单, transform 也简单, 可框架须要考虑复杂状况
当 ScaleH 的位置被大量的 transform 取代, 甚至 PlaceC 也包裹在 transform 中呢?
我感到状况将会变得很是复杂, 而我毫无信心在本身能控制的复杂度内完成...
我须要找到巧妙的办法才行, 否则又是无法写下去的

结构化的图形

我在设计 Quamolit 的运行环境的时候, 不知不觉用到了虚拟机的思路
就是把 Canvas 基本操做设计成一些指令, 而后框架生成这些指令出来运行
这样, Canvas 对我来讲, 就是一个虚拟机, 我用高级的 API 去操做
或者, 类比一下 SVG 的想法, 跟 Canvas API 的写法, 后者就是虚拟机的指令的样子

我是追随声明式编程的, 甚至声明式写动画. 那我天然认为 SVG 是高级的方案
Canvas API 过程式的写法, 不如 SVG 的写法更适合模块化, 也不够直白
如今不少的 Canvas 类库, 采用的虽然更靠近声明式, 但依然是 API 的过程式调用
那么我认为, 将来相似 React Canvas 的方案深化出现, 才是好的方案
...固然我注意到 React 在 DOM 上受到限制, 生成动画和渐变有很多缺陷

同时, 跟着上边虚拟机的类比, 虚拟机提供了新的语言, 能够用更高级的思惟编程
那么, 对于图形而言, SVG 一类的方案是否也有着相似编程语言种种特性呢?
好比说, CSS 某些属性在 DOM 上继承, 就像是编程语言做用域的穿透似的
那么是否能够参考编程语言提供给代码控制离的方式, 提供给图形元素这样的控制能力?

fibonacci = (n) ->
  if n <= 2
    fibonacci(n - 1) + fibonacci(n - 2)
  else
    1

好比 fibonacci 能从外层的闭包获取数据, 自身进行判断和计算
那么, 对于图形元素而言, 获取父元素位置信息, 判断和计算是不是基本的功能?
咱们原先设计的 CSS 布局, 很大程度就屏蔽这种内部元素探测环境的机能
那么我想, 让每一个图形元素都有能力自身进行计算, 就想 React, 是否是更好?

并且做用域以及数值, 就和各类图形元素产生一些对应关系咱们是否是能够模仿编程语言, 提供图形编程更多的编程能力而且以之为基础, 完善一套声明式编程图形界面的更清晰的思路?到这里, 是个人一些猜测, 固然我仍是要继续考虑和探索一下