Konva Vue当中的一些技术心得

Konva是非常优秀的Canvas操作库，也做了React和Vue等框架当中的适配，不过官方文档中的信息给的很少，经过了一些摸索。

先推荐一个国人弄的Konva的中文文档：http://konvajs-doc.bluehymn.com/

与标准JS版本的Konva相比，Vue版最需要注意的就是组件化当中的概念，所有的Konva对应的元素都变成了Vue当中的Component，所以，对于它的操作需要明晰概念。

当我们用refs获取元素的时候，得到的是标准的Vue Component，而不是Konva控件，从Chrome中输出即可看出。

this.refs.stage，是Konva在Vue中的Stage控件，如果要对这个stage进行Konva操作，需要使用this.refs.stage.getNode()，这样操作的对象才是Konva元素。再直接写一个相对完整的实例：

const transformerNode = this.$refs.transformer.getNode(); //获得变形器Node
const stage = transformerNode.getStage(); //获得所在舞台
const { myitemname } = this; 
const myitem = stage.findOne("." + myitemname); //查找要操作的Node

//如果找到元素，则将变形器加载到该元素上
if (selectedNode) {
    // attach to another node
    transformerNode.nodes([selectedNode]);
} else {
    // remove transformer
    transformerNode.nodes([]);
}

//这里要特别说明下batchDraw()，这是Konva为了进行一些持续性操作重绘Canvas时造成的性能问题而退出的函数，在对于一些MouseMove操作时将降低系统性能消耗
transformerNode.getLayer().batchDraw();