vue组态实现矩形在画布内移动和缩放

最新推荐文章于 2024-08-12 15:07:29 发布

努力学习前端的77

最新推荐文章于 2024-08-12 15:07:29 发布

阅读量1.3k

点赞数 1

分类专栏： vue css 文章标签： vue

本文链接：https://blog.csdn.net/qq_36545813/article/details/109644353

版权

本文探讨了在Vue中实现矩形组件在画布内拖动和缩放的核心原理，主要关注CSS的拖拽和缩放逻辑。通过理解CSS中的offsetX, clientX等属性，以及如何获取并应用distX和distY，可以实现元素的精确移动。文中还提到了在Vue组件中应用这些原理的方法，并提供了演示结果。" 113023714,10538111,使用word2vec构建中文词向量教程,"['自然语言处理', '深度学习', '文本挖掘', '词嵌入', '数据预处理']

摘要由CSDN通过智能技术生成

组态项目参考

理解css实现鼠标拖拽移动的原理

其实在vue中实现组件的拖拽和缩放，核心应该在于css中如何实现拖拽和缩放，以及css的offsetX,clientX等样式的掌握。所以，在做vue组态中实现组件拖拽和移动之前，先来理解css实现移动拖拽的逻辑：
对css实现拖拽的理解的参考

在这里插入图片描述
通过上图可以知道，不管元素如何移动。通过鼠标移动元素的时候，distX和distY始终保持不变。
所以元素的坐标位置可以通过：( 鼠标X坐标 – distX , 鼠标Y坐标 – distY ) 获得。
鼠标的任意时刻坐标可以通过鼠标事件获取。如何获取distX , distY ,就成了获取元素任意时刻位置的关键。
获得了元素的位置，就可以通过给元素定位的方式或者transfrom的方式进行移动元素。

vue中实现鼠标移动拖拽组件

参考

demo演示：
<!-- vue组态实现矩形在画布内移动： -->
<template>
    <div
    id="test"
    @mousemove="get"
    :style="{'left':fastartLeft+'px','top':fastartTop+'px'}">
        <h1>测试vue组态--实现移动和拖拽</h1>
        <p>鼠标坐标：</p>
        <p>{
   {
   left}}</p>
        <p>{
   {
   top}}</p>