首发《konva添加刻度尺教程》

全部评论 61

1. 

   十大

   Google Chrome Windows 10

   1月前

   阿斯顿

   回复
2. 

   wh

   Google Chrome MacOS

   3月前

   博主，请教下我刻度尺做出来了，但是我想拖动图层时刻度尺跟着移动，并且自动计算刻度，有点像这个https://nihaojob.github.io/vue-fabric-editor/#/网站里面刻度尺的功能，请问该如何实现，目前我的实现方法是更改视图外面text的位置，这样避免不断添加和销毁text，但是这种方法效率并不高，而且快速拖拽时会有一段刻度是空白的

   回复
1. 

   木灵鱼儿

   FireFox Windows 10

   3月前

   @wh不用销毁啊，它都是上面和左边有一个跟选中物体大小的刻度尺，做两个然后对应不就完事了，更改宽高和左右的数字不就行了，是可以复用的啊

   回复
1. 

   wh

   Google Chrome MacOS

   3月前

   @木灵鱼儿就是这个操作感觉有点慢，按照我的想法我每次拖动满10刻度值就会处理一次，那么我每次都可以拿到一个需要处理的text和刻度值，可是当我快速拖拽时问题就出来了，他会算漏一些，会在获取交集以为的text那边出现问题。

   回复
1. 

   木灵鱼儿

   FireFox Windows 10

   3月前

   @wh刻度应该跟距离顶部和左侧挂钩吧，为啥不能通过获取这个距离来计算刻度呢，只需要计算出第一个x的距离，x2就等于x1+拖拽元素宽度

   回复
1. 

   wh

   Google Chrome MacOS

   3月前

   @木灵鱼儿大佬您可以试试快速拖动的情况下还能不能正常计算，就是从左边瞬间拖到右边，我这边会漏掉

   回复
1. 

   木灵鱼儿

   FireFox Windows 10

   3月前

   @wh我这边已经好久不整这个了[辣眼睛]

   回复
1. 

   wh

   Google Chrome MacOS

   3月前

   @木灵鱼儿哈哈哈哈，我刚好研究着，大佬可以看看我现在的效果，正常慢慢滑没事，快速滑就会有几个刻度值空的 https://bu.dusays.com/2023/06/29/649d202b23136.gif

   回复
2. 

   wh

   Google Chrome MacOS

   3月前

   @木灵鱼儿我现在也是复用的，我的做法是拖拽时获取偏移量，计算起点终点，重新计算刻度，用for将这个需要重新渲染的刻度放在一个数组list中，最后通过获取我group里面的text存在textlist中，判断textlist和list中的交集，这部分就是不需要做处理的，最终可以的到需要处理的text和需要重新渲染的刻度值index，然后改变这个text的内容和位置。

   回复
3. 

   kk

   Google Chrome MacOS

   3月前

   学习

   回复
4. 

   wh

   Google Chrome MacOS

   3月前

   学习

   回复
5. 

   little white

   Google Chrome MacOS

   5月前

   学习

   回复
6. 

   1

   Google Chrome Windows 10

   5月前

   学习

   回复
7. 

   1

   Google Chrome Windows 10

   5月前

   11学习

   回复
8. 

   123

   Google Chrome Windows 10

   5月前

   啊大大

   回复
9. 

   mefisto

   Google Chrome Windows 10

   6月前

   学习一下

   回复
10. 

    闹心

    Google Chrome Windows 10

    6月前

    厉害

    回复