木灵鱼儿
阅读:4846
首发《konva添加刻度尺教程》
预览图
前言
在使用konva库做图形拖拽的时候,你会发现konva没有提供刻度尺和辅助线的功能,导致你不知道你拖拽的实际坐标,这就很难受了,在谷歌百度查教程的时候,看见官方之前就给予过类似问题的回应。
问题issues:How to add a ruler for konva
官方回应(翻译):如果你需要这样的形状,就画画。作为文本 + 多行,或自定义形状(以获得更好的性能)
既然搜索引擎和官方都没有类似的答案,我们就自己来。
先搞定刻度尺问题。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。
相关推荐
首发《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中图片Image图形的一些问题和解决方案
图形的加载在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添加辅助线教程》
预览图前言之前出了刻度尺的教程,刻度尺有了,但是单一的存在功能并不直观,我们还需要辅助线功能,不多说,开搞[hide]教程添加辅助线逻辑稍微辅助一些,我们需要监听拖拽事件,但是如果监听每个图形的拖拽事件,那是非常不靠谱的想法,300个图形就有300个事件监听,显然不合理,好在konva的layer对象,是可以监听到所有可拖拽对象的拖拽事件的,我们不需要给每个图形添加,只需要监听layer即可。拖拽事件:dragstart 拖拽开始事件dragmove 拖拽中dragend 拖拽结束拖拽事件,我们可以通过event对象获取到被拖拽的目标图形:this.$layer.on("d...

闹心
Google Chrome Windows 10厉害
东哥
Google Chrome MacOS学习一下
111
Google Chrome Windows 10学习学习
分隔
FireFox Windows 10对方梵蒂冈反对
freefeng
FireFox Windows 10学习一下
jcf
Google Chrome MacOS牛
a
Google Chrome Windows 10啊啊啊
marc
Google Chrome Windows 10学习
陈小帅
Safari iPhone学习一下
哈哈
Google Chrome MacOS学习一下