预览图

前言

在使用konva库做图形拖拽的时候,你会发现konva没有提供刻度尺和辅助线的功能,导致你不知道你拖拽的实际坐标,这就很难受了,在谷歌百度查教程的时候,看见官方之前就给予过类似问题的回应。

问题issues:How to add a ruler for konva

官方回应(翻译):如果你需要这样的形状,就画画。作为文本 + 多行,或自定义形状(以获得更好的性能)

既然搜索引擎和官方都没有类似的答案,我们就自己来。

先搞定刻度尺问题。

此处内容已隐藏回复后方可阅读。

分类: konva库 标签: konva刻度尺

评论

全部评论 68

  1. slarher
    slarher
    Google Chrome Android
    ruler刻度尺
  2. Stray
    Stray
    Google Chrome Windows 10
    vsd大水上
  3. kkii
    kkii
    Google Chrome Windows 10
    好好好好好好
  4. myxc
    myxc
    Google Chrome Windows 7
    hhh参观一下
  5. 123
    123
    Google Chrome MacOS
    好好好好好
  6. 111
    111
    Google Chrome Windows 10
    啊啊啊啊啊啊
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @111一库,一库[doge]
  7. 十大
    十大
    Google Chrome Windows 10
    阿斯顿
  8. wh
    wh
    Google Chrome MacOS
    博主,请教下我刻度尺做出来了,但是我想拖动图层时刻度尺跟着移动,并且自动计算刻度,有点像这个https://nihaojob.github.io/vue-fabric-editor/#/网站里面刻度尺的功能,请问该如何实现,目前我的实现方法是更改视图外面text的位置,这样避免不断添加和销毁text,但是这种方法效率并不高,而且快速拖拽时会有一段刻度是空白的
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @wh不用销毁啊,它都是上面和左边有一个跟选中物体大小的刻度尺,做两个然后对应不就完事了,更改宽高和左右的数字不就行了,是可以复用的啊
      1. wh
        wh
        Google Chrome MacOS
        @木灵鱼儿就是这个操作感觉有点慢,按照我的想法我每次拖动满10刻度值就会处理一次,那么我每次都可以拿到一个需要处理的text和刻度值,可是当我快速拖拽时问题就出来了,他会算漏一些,会在获取交集以为的text那边出现问题。
        1. 木灵鱼儿
          木灵鱼儿
          FireFox Windows 10
          @wh刻度应该跟距离顶部和左侧挂钩吧,为啥不能通过获取这个距离来计算刻度呢,只需要计算出第一个x的距离,x2就等于x1+拖拽元素宽度
          1. wh
            wh
            Google Chrome MacOS
            @木灵鱼儿大佬您可以试试快速拖动的情况下还能不能正常计算,就是从左边瞬间拖到右边,我这边会漏掉
            1. 木灵鱼儿
              木灵鱼儿
              FireFox Windows 10
              @wh我这边已经好久不整这个了[辣眼睛]
              1. wh
                wh
                Google Chrome MacOS
                @木灵鱼儿哈哈哈哈,我刚好研究着,大佬可以看看我现在的效果,正常慢慢滑没事,快速滑就会有几个刻度值空的 https://bu.dusays.com/2023/06/29/649d202b23136.gif
      2. wh
        wh
        Google Chrome MacOS
        @木灵鱼儿我现在也是复用的,我的做法是拖拽时获取偏移量,计算起点终点,重新计算刻度,用for将这个需要重新渲染的刻度放在一个数组list中,最后通过获取我group里面的text存在textlist中,判断textlist和list中的交集,这部分就是不需要做处理的,最终可以的到需要处理的text和需要重新渲染的刻度值index,然后改变这个text的内容和位置。
  9. kk
    kk
    Google Chrome MacOS
    学习
  10. wh
    wh
    Google Chrome MacOS
    学习

目录