实现旋转、拖动、参考线、吸附等功能(最简单方法)

最新推荐文章于 2024-06-17 22:25:38 发布
最新推荐文章于 2024-06-17 22:25:38 发布
阅读量347 收藏 3
点赞数 11
文章标签： 前端 canva可画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55896343/article/details/139600282
版权

实现旋转、拖动、参考线、吸附等功能(最简单方法)

效果如下：在这里插入图片描述
我使用的是konva框架画的图形，
点我去Konva
在这里插入图片描述
如果你会使用canvas，这个框架对于你来说很简单的。我们想画一个圆一个矩形或者其他的图像直接，定一个对象即可。我个人比较喜欢这个，因为我工作中用canvas用的比较多，又不想写原生的。有兴趣的可以看一看，了解一下。

在这里插入图片描述

我们简单的介绍了Konva。我们来唠正事。先上代码，在慢慢剖析：
代码如下： 可以直接运行出效果

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Snapping of shapes Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;
      var GUIDELINE_OFFSET = 5;
      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();
      stage.add(layer);

      // Generate random rectangles
      for (var i = 0; i < 5; i++) {
        var rect = new Konva.Rect({
          x: Math.random() * stage.width(),
          y: Math.random() * stage.height(),
          width: 50 + Math.random() * 50,
          height: 50 + Math.random() * 50,
          fill: Konva.Util.getRandomColor(),
          draggable: true,
          name: 'object'
        });
        layer.add(rect);

        // Add a transformer to each rectangle
        var tr = new Konva.Transformer({
          node: rect,
          centeredScaling: true,
          rotationSnaps: [0, 90, 180, 270]
        });

        layer.add(tr);
      }

      // Create a group containing a triangle and a square
      var group = new Konva.Group({
        x: stage.width() / 2,
        y: stage.height() / 2,
        draggable: true,
        name: 'object'
      });

      var triangle = new Konva.Line({
        points: [-50, 50, 50, 50, 0, -50],
        fill: 'red',
        closed: true
      });

      var square = new Konva.Rect({
        x: -25,
        y: 10,
        width: 20,
        height: 20,
        fill: 'blue'
      });

      group.add(triangle);
      group.add(square);
      layer.add(group);

      var groupTransformer = new Konva.Transformer({
        node: group,
        centeredScaling: true,
        rotationSnaps: [0, 90, 180, 270]
      });

      layer.add(groupTransformer);
      layer.draw();

      function getLineGuideStops(skipShape) {
        var vertical = [0, stage.width() / 2, stage.width()];
        var horizontal = [0, stage.height() / 2, stage.height()];
        stage.find('.object').forEach(guideItem => {
          if (guideItem === skipShape) {
            return;
          }
          var box = guideItem.getClientRect();
          console.log(box);
          vertical.push([box.x, box.x + box.width, box.x + box.width / 2]);
          horizontal.push([box.y, box.y + box.height, box.y + box.height / 2]);
        });
        return {
          vertical: vertical.flat(),
          horizontal: horizontal.flat()
        };
      }

      function getObjectSnappingEdges(node) {
        var box = node.getClientRect();
        return {
          vertical: [
            {
              guide: Math.round(box.x),
              offset: Math.round(node.x() - box.x),
              snap: 'start'
            },
            {
              guide: Math.round(box.x + box.width / 2),
              offset: Math.round(node.x() - box.x - box.width / 2),
              snap: 'center'
            },
            {
              guide: Math.round(box.x + box.width),
              offset: Math.round(node.x() - box.x - box.width),
              snap: 'end'
            }
          ],
          horizontal: [
            {
              guide: Math.round(box.y),
              offset: Math.round(node.y() - box.y),
              snap: 'start'
            },
            {
              guide: Math.round(box.y + box.height / 2),
              offset: Math.round(node.y() - box.y - box.height / 2),
              snap: 'center'
            },
            {
              guide: Math.round(box.y + box.height),
              offset: Math.round(node.y() - box.y - box.height),
              snap: 'end'
            }
          ]
        };
      }

      function getGuides(lineGuideStops, itemBounds) {
        var resultV = [];
        var resultH = [];
        lineGuideStops.vertical.forEach(lineGuide => {
          itemBounds.vertical.forEach(itemBound => {
            var diff = Math.abs(lineGuide - itemBound.guide);
            if (diff < GUIDELINE_OFFSET) {
              resultV.push({
                lineGuide: lineGuide,
                diff: diff,
                snap: itemBound.snap,
                offset: itemBound.offset
              });
            }
          });
        });
        lineGuideStops.horizontal.forEach(lineGuide => {
          itemBounds.horizontal.forEach(itemBound => {
            var diff = Math.abs(lineGuide - itemBound.guide);
            if (diff < GUIDELINE_OFFSET) {
              resultH.push({
                lineGuide: lineGuide,
                diff: diff,
                snap: itemBound.snap,
                offset: itemBound.offset
              });
            }
          });
        });
        var guides = [];
        var minV = resultV.sort((a, b) => a.diff - b.diff)[0];
        var minH = resultH.sort((a, b) => a.diff - b.diff)[0];
        if (minV) {
          guides.push({
            lineGuide: minV.lineGuide,
            offset: minV.offset,
            orientation: 'V',
            snap: minV.snap
          });
        }
        if (minH) {
          guides.push({
            lineGuide: minH.lineGuide,
            offset: minH.offset,
            orientation: 'H',
            snap: minH.snap
          });
        }
        return guides;
      }

      function drawGuides(guides) {
        guides.forEach(lg => {
          if (lg.orientation === 'H') {
            var line = new Konva.Line({
              points: [-6000, lg.lineGuide, 6000, lg.lineGuide],
              stroke: 'rgb(0, 161, 255)',
              strokeWidth: 1,
              name: 'guid-line',
              dash: [4, 6]
            });
            layer.add(line);
            layer.batchDraw();
          } else if (lg.orientation === 'V') {
            var line = new Konva.Line({
              points: [lg.lineGuide, -6000, lg.lineGuide, 6000],
              stroke: 'rgb(0, 161, 255)',
              strokeWidth: 1,
              name: 'guid-line',
              dash: [4, 6]
            });
            layer.add(line);
            layer.batchDraw();
          }
        });
      }

      function handleTransform(e) {
        layer.find('.guid-line').destroy();
        var lineGuideStops = getLineGuideStops(e.target);
        var itemBounds = getObjectSnappingEdges(e.target);
        var guides = getGuides(lineGuideStops, itemBounds);
        if (!guides.length) {
          return;
        }
        drawGuides(guides);
        guides.forEach(lg => {
          switch (lg.snap) {
            case 'start': {
              switch (lg.orientation) {
                case 'V': {
                  e.target.x(lg.lineGuide + lg.offset);
                  break;
                }
                case 'H': {
                  e.target.y(lg.lineGuide + lg.offset);
                  break;
                }
              }
              break;
            }
            case 'center': {
              switch (lg.orientation) {
                case 'V': {
                  e.target.x(lg.lineGuide + lg.offset);
                  break;
                }
                case 'H': {
                  e.target.y(lg.lineGuide + lg.offset);
                  break;
                }
              }
              break;
            }
            case 'end': {
              switch (lg.orientation) {
                case 'V': {
                  e.target.x(lg.lineGuide + lg.offset);
                  break;
                }
                case 'H': {
                  e.target.y(lg.lineGuide + lg.offset);
                  break;
                }
              }
              break;
            }
          }
        });
      }

      layer.on('dragmove', handleTransform);
      layer.on('transform', handleTransform);

      layer.on('dragend', function(e) {
        layer.find('.guid-line').destroy();
        layer.batchDraw();
      });

      layer.on('transformend', function(e) {
        layer.find('.guid-line').destroy();
        layer.batchDraw();
      });

      layer.draw();
    </script>
  </body>
</html>

我们主要看拖动事件：

layer.on('dragmove', handleTransform);
layer.on('transform', handleTransform);

handleTransform 方法干了哪些事件：

   /**
       * 处理元素变换时的辅助线引导。
       * 此函数用于在拖动或调整元素时，计算并显示辅助线，以及根据辅助线对元素进行对齐。
       * @param {Object} e - 事件对象，包含目标元素的信息。
       */
      function handleTransform(e) {
        // 销毁当前存在的辅助线，以更新新的辅助线。
        layer.find('.guid-line').destroy();
        
        // 获取当前操作元素的辅助线停靠点。
        var lineGuideStops = getLineGuideStops(e.target);
        // 获取当前操作元素的边界信息，用于辅助线的计算。
        var itemBounds = getObjectSnappingEdges(e.target);
        // 根据停靠点和边界信息计算辅助线。
        var guides = getGuides(lineGuideStops, itemBounds);
        
        // 如果没有计算出辅助线，则不进行后续操作。
        if (!guides.length) {
          return;
        }
        
        // 绘制计算出的辅助线。
        drawGuides(guides);
        
        // 遍历所有辅助线，根据不同的对齐类型和方向，调整元素的位置。
        guides.forEach(lg => {
          switch (lg.snap) {
            case 'start': {
              // 根据辅助线的方向，调整元素的起点位置。
              switch (lg.orientation) {
                case 'V': {
                  e.target.x(lg.lineGuide + lg.offset);
                  break;
                }
                case 'H': {
                  e.target.y(lg.lineGuide + lg.offset);
                  break;
                }
              }
              break;
            }
            case 'center': {
              // 根据辅助线的方向，调整元素的中心位置。
              switch (lg.orientation) {
                case 'V': {
                  e.target.x(lg.lineGuide + lg.offset);
                  break;
                }
                case 'H': {
                  e.target.y(lg.lineGuide + lg.offset);
                  break;
                }
              }
              break;
            }
            case 'end': {
              // 根据辅助线的方向，调整元素的终点位置。
              switch (lg.orientation) {
                case 'V': {
                  e.target.x(lg.lineGuide + lg.offset);
                  break;
                }
                case 'H': {
                  e.target.y(lg.lineGuide + lg.offset);
                  break;
                }
              }
              break;
            }
          }
        });

**如果文章对你有帮助，点个赞再走吧。

有不懂的，或者说有问题的，欢迎留言，批评指正.**

棒5
关注
  • 11
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
C++ Qt 实现鼠标拖动旋转功能
04-04
C++ Qt 实现鼠标拖动旋转功能，做了一个中国汉族古音律学习辅助软件，可以查找古琴音位，十二律、五音、简谱、西音、工尺对应。 主要还是技术代码，鼠标拖动旋转功能，可以借鉴到其他项目。
手把手教写拖拽布局插件（辅助线功能篇）
qq_23447231的博客
12-16 1202
辅助线功能大概的思路是当同一个父元素中的Accelerator实例超过两个时，移动到两个实例的坐标相同时显示出辅助线，原本这个功能应该是和吸附一起使用的，不过我打算先写辅助线，因为没有写吸附，所以辅助线出现的条件会比较困难，效果如下： 原理分析 写辅助线就必须要知道当前所以的Accelerator实例的位置信息，之前将所有实例都存在了Accelerator._instanceList中，现在正好派上用场。 最多的时候会出现六条辅助线： 其中横线三条，竖线三条，也就是图中的x1,x2,x3和y1,y2,y
Javascript jquery 实现 拖拽， 和吸附功能
09-07
自己用js 写的拖拽div， 吸附window 边缘功能。
前端使用 Konva 实现可视化设计器（16）- 旋转对齐、触摸板操作的优化
最新发布
xachary的博客
06-17 462
这一章解决两个缺陷，一是调整一些快捷键，使得 Mac 触摸板可以正常操作；二是修复一个 Issue，使得即使素材节点即使被旋转之后，也能正常触发磁贴对齐效果，有个小坑需要注意。
3千字长文canvas实现任意正多边形的移动（点、线、面）
趣谈前端
07-08 583
关注并将「趣谈前端」设为星标每日定时推送技术干货/优秀开源/技术思维前言上一篇文章简单实现了在canvas中移动矩形（点线面），不清楚的小伙伴请看这篇文章：用canvas 实现矩形的移动（...
实现 组件： 拖拽、缩放、 生成辅助线 以及吸附功能。
lzfengquan的博客
02-04 941
遍历画布上的所有元素（除了当前拖拽元素），并为每个元素计算并保存辅助线的位置。在拖拽过程中，监听 drag 事件，并将拖拽元素的位置与之前保存的数据进行比较。当拖拽元素时，通过比较拖拽元素与画布上其他元素的位置，当某个元素与拖拽元素的距离接近时，显示辅助线。顶对顶：拖拽元素的顶部与对比元素的顶部对齐。顶对底：拖拽元素的顶部与对比元素的底部对齐。底对顶：拖拽元素的底部与对比元素的顶部对齐。底对底：拖拽元素的底部与对比元素的底部对齐。中：拖拽元素的中部与对比元素的中部对齐。top：用于计算对齐位置的参考位置。
canvas 网站背景鼠标吸附线条动画
HuangsTing的博客
01-15 477
完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> ! function() { funct...
JS鼠标吸粉特效
weixin_30725467的博客
06-03 82
HTML <canvas id=canvas></canvas> CSS * { margin: 0; padding: 0; } html { overflow: hidden; } canvas { cursor: none; } JS window.onload = function() { var canvas = docu...
JS 拖拽对齐参考线+自动吸附+对齐到网格
热门推荐
sflf36995800的博客
09-01 1万+
具体代码参见：https://github.com/yyccmmkk/js-reference-line 【需求】 对一个元素进行拖拽时，生成这个组件和其它组件对齐的参考线，实现各组件间四条边及水平中心线及垂直中心线对齐。在拖动完成后实现自动吸附对齐。 【解决思路】 1 MAP记录所有需要对齐组件的视窗坐标点（左上，右上，左下，右下） 2 P为当前拖拽对象实时的坐标点（左上，左下，...
canvas 鼠标绘制多边形，可自动吸附闭合
HuangsTing的博客
01-15 4153
完整代码：（记得引入jQuery） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas绘制多边形</title> <script src="jQuery.js"></script&gt...
js实现简单div拖拽功能实例
10-24
主要介绍了js实现简单div拖拽功能的方法,实例分析了javascript针对div层拖拽的实现技巧,需要的朋友可以参考下
Android编程实现3D滑动旋转效果的方法
01-05
本文实例讲述了Android编程实现3D滑动旋转效果的方法。分享给大家供大家参考，具体如下： 这里我们通过代码实现一些滑动翻页的动画效果。 Animation实现动画有两个方式：帧动画（frame-by-frame animation）和补间...
Android实现旋转，放大，缩小图片的方法
01-04
本文实例讲述了Android实现旋转，放大，缩小图片的方法。分享给大家供大家参考，具体如下： 项目中需要做到一个预览图片的功能 最初设想自定义个一个view，在onDraw中用的是生成新的Bitmap，来放大，缩小 但由于手机...
js案例 元素的拖拽与吸附(touch+translate)
11-29 6934
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale...
html5自动吸附,基于HTML5Canvas的3D渲染引擎界面以及吸附等效果的运用-
weixin_40001275的博客
06-01 427
本文给大家介绍基于 HTML5 Canvas 的 3D 渲染引擎界面以及吸附等效果的运用 ，有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。效果图代码实现HT 提供了基于 WebGL 的 3D 技术的图形组件 ht.graph3d.Graph3dView，WebGL 基于 OpenGL ES 2.0 图形接口，因此 WebGL 属于底层的图形 API 接口，二次开发还是有很高的门槛...
用Canvas实现 坐标线 画图 拖拽 移动
Polarisone的博客
09-02 4264
主要分三步 1. html页面 2. mikuCanvasAxes.js 3. mikuCanvasPaintAppMain.js 在html页面中直接引入以上两个js即可,就可实现如下功能 1. 点击添加块出现红色的圆形 2. 当鼠标拖拽红色的圆形便会出现x,y轴线随着圆的移动随着他移动 3. 移动图的同时最上方会出现你所移动的坐标数 1.html页面 <!DOCTYPE html&g...
unity实现ui拖拽 按制定角旋转 选中功能插件源码
12-25
Unity是一款非常强大的游戏开发引擎，可以实现UI拖拽、按指定角度旋转和选中功能。通过使用插件，我们可以更方便地实现这些功能。 首先，对于UI拖拽功能，我们可以使用Unity官方提供的EventSystem来实现。我们可以创建一个UI元素，并为其添加一个EventTrigger组件，然后在脚本中编写相应的代码，即可实现拖拽功能。如果需要更复杂的拖拽功能，可以使用第三方插件来扩展。 其次，对于按指定角度旋转功能，可以使用Unity自带的UI元素或第三方插件来实现。我们可以添加一个滑动条或旋转控制按钮，并在脚本中编写旋转逻辑，即可实现按指定角度旋转功能。 最后，对于选中功能，我们可以使用EventSystem的射线检测功能来实现。当玩家点击或触摸UI元素时，我们可以通过射线检测判断是否选中了相应的UI元素，并执行相应的操作。 总的来说，Unity实现UI拖拽、按制定角旋转和选中功能可以通过编写脚本或使用插件来实现。希望这些信息可以帮助到你。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值