预览图前言在刻度尺和辅助线的基础上增加键盘方向键事件，方便微调，毕竟鼠标拖拽浮动太大了。[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...

预览图前言之前出了刻度尺的教程，刻度尺有了，但是单一的存在功能并不直观，我们还需要辅助线功能，不多说，开搞[hide]教程添加辅助线逻辑稍微辅助一些，我们需要监听拖拽事件，但是如果监听每个图形的拖拽事件，那是非常不靠谱的想法，300个图形就有300个事件监听，显然不合理，好在konva的layer对象，是可以监听到所有可拖拽对象的拖拽事件的，我们不需要给每个图形添加，只需要监听layer即可。拖拽事件：dragstart 拖拽开始事件dragmove 拖拽中dragend 拖拽结束拖拽事件，我们可以通过event对象获取到被拖拽的目标图形：this.$layer.on("d...

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