首发《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...

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