使用 [konva](https://konvajs.org/) 实现一个设计器交互，首先考虑实现设计器的画布。一个基本的画布：【展示】网格、比例尺【交互】拖拽、缩放 “拖拽”是无尽的，“缩放”是基于鼠标焦点的。最终效果（[示例地址](https://xachary.github.io/konva-designer-sample/)）： ![1.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bc1f27abbd2648f6bbf50de509148572~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1472&h=887&s=100188&e=png&b=f7f7f7) ![2.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1415e78bb680464690a9ec729cc7b4ae~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1470&h=888&s=991249&e=gif&f=86&b=f6f6f6) ![3.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b429b372a1a64694ba6b5d29d4858bc7~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1478&h=890&s=1125962&e=gif&f=93&b=f7f7f7) 基本思路：设计区域 HTML 由两个节点构成，内层挂载一个 Konva.stage 作为画布的开始。 ```html ``` ![4.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4e76c6eb5b04f2fb1d802552a223cbf~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1468&h=884&s=103325&e=png&b=f7f7f7) Konva.stage 暂时先设计3个 Konva.Layer，分别用于绘制背景、所有素材、比例尺。 ![8.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bcb682233ecc4ff1a45ab058354b229b~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=900&h=716&s=222396&e=png&b=efefef) 通过 ResizeObserver 使 Konva.stage 的大小与外层 boardElement 保持一致。为了显示“比例尺” Konva.stage 默认会偏移一些距离，这里定义“比例尺”尺寸为 40px。 ```ts this.stage = new Konva.Stage({ container: stageEle, x: this.rulerSize, y: this.rulerSize, width: config.width, height: config.height }) ``` 关于“网格背景”，是按照当前设计区域大小、缩放大小、偏移量，计算横向、纵向分别需要绘制多少条 Konva.Line（横向、纵向分别多加1条），同时根据 Konva.stage 的 x,y 进行偏移，用有限的 Konva.Line 模拟无限的网格画布。 ```ts // 格子大小 const cellSize = this.option.size // const width = this.stage.width() const height = this.stage.height() const scaleX = this.stage.scaleX() const scaleY = this.stage.scaleY() const stageX = this.stage.x() const stageY = this.stage.y() // 列数 const lenX = Math.ceil(width / scaleX / cellSize) // 行数 const lenY = Math.ceil(height / scaleY / cellSize) const startX = -Math.ceil(stageX / scaleX / cellSize) const startY = -Math.ceil(stageY / scaleY / cellSize) const group = new Konva.Group() group.add( new Konva.Rect({ name: this.constructor.name, x: 0, y: 0, width: width, height: height, stroke: 'rgba(255,0,0,0.1)', strokeWidth: 2 / scaleY, listening: false, dash: [4, 4] }) ) // 竖线 for (let x = startX; x < lenX + startX + 1; x++) { group.add( new Konva.Line({ name: this.constructor.name, points: _.flatten([ [cellSize * x, -stageY / scaleY], [cellSize * x, (height - stageY) / scaleY] ]), stroke: '#ddd', strokeWidth: 1 / scaleY, listening: false }) ) } // 横线 for (let y = startY; y < lenY + startY + 1; y++) { group.add( new Konva.Line({ name: this.constructor.name, points: _.flatten([ [-stageX / scaleX, cellSize * y], [(width - stageX) / scaleX, cellSize * y] ]), stroke: '#ddd', strokeWidth: 1 / scaleX, listening: false }) ) } this.group.add(group) ``` 关于“比例尺”，与“网格背景”思路差不多，在绘制“刻度”和“数值”的时候相对麻烦一些，例如绘制“数值”的时候，需要动态判断应该使用多大的字体。 ```ts let fontSize = fontSizeMax const text = new Konva.Text({ name: this.constructor.name, y: this.option.size / scaleY / 2 - fontSize / scaleY, text: (x * cellSize).toString(), fontSize: fontSize / scaleY, fill: '#999', align: 'center', verticalAlign: 'bottom', lineHeight: 1.6 }) while (text.width() / scaleY > (cellSize / scaleY) * 4.6) { fontSize -= 1 text.fontSize(fontSize / scaleY) text.y(this.option.size / scaleY / 2 - fontSize / scaleY) } text.x(nx - text.width() / 2) ``` 关于“拖拽”，这里设计的是通过鼠标右键拖拽画布，通过记录 mousedown 时 Konva.stage 起始位置、鼠标位置，mousemove 时将鼠标位置偏移与Konva.stage 起始位置计算最新的 Konva.stage 的位置即可。 ```ts mousedown: (e: Konva.KonvaEventObject) => { if (e.evt.button === Types.MouseButton.右键) { // 鼠标右键 this.mousedownRight = true this.mousedownPosition = { x: this.render.stage.x(), y: this.render.stage.y() } const pos = this.render.stage.getPointerPosition() if (pos) { this.mousedownPointerPosition = { x: pos.x, y: pos.y } } document.body.style.cursor = 'pointer' } }, mouseup: () => { this.mousedownRight = false document.body.style.cursor = 'default' }, mousemove: () => { if (this.mousedownRight) { // 鼠标右键拖动 const pos = this.render.stage.getPointerPosition() if (pos) { const offsetX = pos.x - this.mousedownPointerPosition.x const offsetY = pos.y - this.mousedownPointerPosition.y this.render.stage.position({ x: this.mousedownPosition.x + offsetX, y: this.mousedownPosition.y + offsetY }) // 更新背景 this.render.draws[Draws.BgDraw.name].draw() // 更新比例尺 this.render.draws[Draws.RulerDraw.name].draw() } } } ``` 关于“缩放”，可以参考 konva 官网的[缩放示例](https://konvajs.org/docs/sandbox/Zooming_Relative_To_Pointer.html)，思路是差不多的，只是根据实际情况调整了逻辑。接下来，计划增加下面功能： - 坐标参考线 - 从左侧图片素材拖入节点 - 鼠标、键盘移动节点 - 鼠标、键盘单选、多选节点 - 单个、多个节点拖动时的磁贴交互 - 键盘复制、粘贴 - 节点层次单个、批量调整 - 等等。。。 > 如果 github Star 能超过 20 个，将很快更新下一篇章。 > > 源码[在这](https://github.com/xachary/konva-designer-sample)，望多多支持