首发《konva添加辅助线教程》

预览图前言在刻度尺和辅助线的基础上增加键盘方向键事件，方便微调，毕竟鼠标拖拽浮动太大了。[hide]教程我们的逻辑是，用户点击图形选中，然后移动，因为我的图形都支持变形操作，所以我把键盘事件的监听放在了Transformer完成后触发。stage可以监听到click事件，所以也省去给每个图形添加。import Konva from "konva/lib/Core"; import { Rect } from "konva/lib/shapes/Rect"; import { Text } from "konva/lib/shapes/Te...

图形的加载在konva中，有两种方式加载图片，其原理都是需要加载图片dom，等图片完全加载完成再置入canvas中，官方的例子是这样的：var imageObj = new Image(); imageObj.onload = function() { var yoda = new Konva.Image({ x: 50, y: 50, image: imageObj, width: 106, height: 118 }); // add the shape to the layer layer.add(yoda); laye...

预览图前言在使用konva库做图形拖拽的时候，你会发现konva没有提供刻度尺和辅助线的功能，导致你不知道你拖拽的实际坐标，这就很难受了，在谷歌百度查教程的时候，看见官方之前就给予过类似问题的回应。问题issues：How to add a ruler for konva官方回应（翻译）：如果你需要这样的形状，就画画。作为文本 + 多行，或自定义形状（以获得更好的性能）既然搜索引擎和官方都没有类似的答案，我们就自己来。先搞定刻度尺问题。[hide]教程既然要画尺子，我们就要想怎么画，如果按照生活中的尺子，1cm一个竖线，我们1px一个竖线肯定是不行的，我的做法是，反正宽高很大，就5px一...