Konva Vue当中的一些技术心得
Konva是非常优秀的Canvas操作库,也做了React和Vue等框架当中的适配,不过官方文档中的信息给的很少,经过了一些摸索。先推荐一个国人弄的Konva的中文文档:http://konvajs-doc.bluehymn.com/与标准JS版本的Konva相比,Vue版最需要注意的就是组件化当中的概念,所有的Konva对应的元素都变成了Vue当中的Component,所以,对于它的操作需要明晰
·
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();
更多推荐
已为社区贡献2条内容
所有评论(0)