利用svg实现鼠标绘制箭头

最新推荐文章于 2024-07-08 16:22:29 发布

机智的西贝同学

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量1.6k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_44271874/article/details/127417670

版权

使用svg实现鼠标拖动绘制箭头

<template>
    <div id="svgMain">
        <svg version="1.1"
             id="container" 
             width="900" height="600" style="border:1px solid #000;position: absolute;left: 50px;top: 50px;" 
             xmlns:svg="http://www.w3.org/2000/svg" 
             xml:space="preserve"
            >
        </svg>

        <div>
            <button @click="drawArrow()">箭头</button>
        </div>
    </div>
</template>

export default {
   
	data(){
   
		return {
   
			groupId: 1,
			lineWidth: 3,
		}
	},
	method:{
   
		drawArrow() {
   
            let _this = this;
            let svg = document.getElementById('container')
            svg.onmousedown =