使用一条带箭头的虚线连接两个div,并且div拖拽时保持虚线连接
1.如何使用带箭头的虚线将div连接
a.了解path命令
我们可以使用svg的path配合marker属性来实现,首先我们需要了解path元素的命令
M(x,y) 起始位置的坐标
L(x,y) 结束位置的坐标
<!-- 从 坐标(150,0) ~ (300,300) -->
<!-- <path d="M 150,0 L 300,300" style="stroke: red ;stroke-width:2px" /> -->
这样我们就会得到一条这样的直线
那么如何绘制一条虚线,只需要添加"stroke-dasharray: 0.5%"属性就可以了
<!-- 从 坐标(150,0) ~ (300,300) -->
<path d="M 150,0 L 300,300" style="stroke: red; stroke-width: 2px ;stroke-dasharray: 0.5%;" />
H(x) 绘制一条给定x坐标的横线
<!-- 从 坐标(150,300) ~ (600,0) 的横线 -->
<path d="M 150,300 H 600" style="stroke: aqua" />
V(y) 绘制一条给定y坐标的垂线
<!-- 从 坐标(150,300) ~ (0,600) 的垂线 -->
<path d="M 150,300 V 600" style="stroke: red; stroke-width: 2px" />
C(x1,y1 x2,y2 x,y) 绘制一条 x1,y1 x2,y2 为控制点 终点为x,y的三次贝塞尔曲线
<!-- 从(50,200)出发,以(0,50)(150,50)为控制点,以(300,200)为终点的三次贝塞尔曲线 /> -->
<path d="M 50,200 C 0,50 150,50 300,200" style="stroke-width: 2px" fill="#fff" />
b.marker属性实现箭头
markerWidth: marker标记的宽度
markerHeight: marker标记的高度
markerUnits: 默认为strokeWidth 将marker的标记的大小设置为允许缩放
refX refY: 是图形和marker标记连接位置的坐标
orient: 他决定marker在与其他元素连接时 是否会旋转
我们图形应用marker有以下几种方法
marker-start=”url(#marker-id)”
marker-mid=”url(#marker-id)”
marker-end=”url(#marker-id)”
marker=”url(#marker-id)”
<defs>
<marker
markerWidth="10"
markerHeight="10"
markerUnits="strokeWidth"
id="wjl"
refX="0"
refY="2"
orient="auto"
>
<path d="M 0 0 L 5 2 L 0 4 z" />
</marker>
</defs>
<path
d="M 0,0 C 150,0 150,100 200,100"
class="line3"
style="marker-end: url(#wjl)"
fill="none"
/>
// .line3 {
// stroke-width: 2px;
// stroke: black;
// }
这样我们就可以绘制一条有箭头的虚线了
2. 了解clientX/Y、 screenX/Y 、offsetX/Y
想要完成这个功能,我们必须了解的就是clientX/Y、 screenX/Y 、offsetX/Y
clientX/Y | 事件被触发时鼠标相对于浏览器区域的水平/垂直坐标 |
screenX/Y | 事件被触发时鼠标相对于屏幕的水平/垂直坐标 |
offsetX/Y | 事件被触发时鼠标相对于事件源的水平/垂直坐标 |
3.接下来我们要实现div的拖动
1、为需要拖动的元素添加鼠标按下事件
2、通过计算坐标实现鼠标拖动div 同理 为第二个div添加此方法
3.接下来通过设置path的M(x,y)和L(x,y)来实现鼠标拖动 连接线始终连接的效果
updated() {
this.d = `M ${this.fX + 25?this.fX + 25:50},${this.fY?this.fY:0} L ${this.sX != ''?this.sX + 25:250},${this.sY?this.sY:55}`;
},
这时候我们在鼠标拖动方法中获得的fX和fY就起到了作用
由于我的div大小为50px,所以为x坐标加25是为了使连接点的起始位置和终点位置都在两个div的中心,我们通过三元运算符来判断以确定在我们没有拖动时连接线的位置,到这一步我们就已经完成了拖动但是连接线保持连接
4.通过进一步判断实现连接线根据两个div位置切换的效果
updated() {
this.d = `M ${this.fX + 25?this.fX + 25:50},${this.fY?(this.fY>this.sY+25?this.fY:this.fY+50):0} L ${this.sX != ''?this.sX + 25:250},${this.sY?(this.sY>this.fY+25?this.sY:this.sY+50):55}`
},
CSDN-Ada助手: Vue入门 技能树或许可以帮到你:https://edu.csdn.net/skill/vue?utm_source=AI_act_vue
秋说: 项目合作,有意可私信我或添加我文章底部联系方式。
CSDN-Ada助手: 恭喜你写了第20篇博客!看到你分享了如何实现ifream内外互相交互功能,我觉得很有帮助。不过我还希望能看到更多关于Vue2和Vue3写法的内容,或许可以分享一些实际项目中的应用案例,让我们更好地理解和运用这些技术。希望你能继续保持创作,期待你的下一篇博客!
Destinynever: 加上了 你不讲我都没注意
溜溜球q: rad是什么方法呀