svg中text标签换行显示,并实现拖拽移动text标签

如图,项目中需要一个在线批阅的功能,批阅者可以在线给word文档进行批注和打勾打叉等功能,后来又追加移动批注和批注换行的功能,想法就是用户通过\n或者按钮等操作对文本进行一个切割,

例如图片中的文本

嘻嘻嘻\n哈哈哈\n啦啦啦\n么么么\n哒哒哒

然后对文本用split("\n")方法进行切割,变成数组['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒哒']

//x 和 y 是做鼠标移动时回传出来的,因为text便签无法换行,所以要换行必须使用tspan标签,

即在text标签中插入tspan便签,x和y分别是控制tspan的x轴和y轴,是相对于svg的,而不是针对于父级text的,

let arr = ['嘻嘻嘻','哈哈哈','啦啦啦','么么么','哒哒哒']

let str

arr.map((item, index) => {

let k = `<tspan x="${x}" y="${y + 20 * (index + 1)}">${item}</tspan >`;

str += k;

});

因为不止有批注还有勾叉,涂鸦等,所以后台给了我一个text字段可以自己存东西,如下图是存text的

这个存的是涂鸦的

移动的话也是需要取出存储的上一次的自段,然后动态去根据x,y的回传值对point的各个坐标进行加减计算,逻辑其实并不复杂,关键储存的东西想清楚,就是业务代码的工作量了,

如果要移动的话,其实还需要给每个标签外加一个rect标签,鼠标移入时让rect 显示,移出时关闭,给予颜色,便于操作,而且如果没有这个rect标签,当你直接拖拽text标签时,他会是一个直接选中文字的效果,而不是拖动

svg中text标签换行显示,并实现拖拽移动text标签相关推荐

svg.draggable.js 实现动态向svg中添加图形和图片并可以拖拽
源码: <!doctype html> <html> <head><meta charset="utf-8"><title&g ...
微信小程序中如何设置textarea或者van-field中的placeholder换行显示
微信小程序中如何设置textarea中的placeholder换行显示 van-field 中直接修改textarea 标签的样式即可 <textarea class="txt_wor ...
html 右侧滚动条,html中去掉textarea右侧滚动条和右下角拖拽
摘要腾兴网为您分享:html中去掉textarea右侧滚动条和右下角拖拽,湘税社保,唯品会,上海交通,钱大掌柜等软件知识,以及玫瑰小镇魔法花园,raw格式转换软件,阳光天天购,live壁纸,废品机械 ...
Unity 基础之在 UGUI 上简单实现VideoPlayer视频播放的功能，简单暂停播放/显示视频名称/显示时长/拖拽播放等
Unity 基础之在 UGUI 上简单实现VideoPlayer视频播放的功能,简单暂停播放/显示视频名称/显示时长/拖拽播放等目录 Unity 基础之在 UGUI 上简单实现VideoPl ...
html中tr中加判断换行符,深入解析HTML的table表格标签与相关的换行问题
何为table:table者Html表格也,数据之载体. 下面是一个比较标准的table代码写法: XML/HTML Code复制内容到剪贴板 MonthDateAUG18 简单的HTML表格由tab ...
EasyUI中放置Droppable的使用以及实现拖拽排序
场景效果实现 webapp下新建droppable文件夹,在其下新建basic.html <!DOCTYPE html> <html lang="en"> ...
vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
前言: openlayers中渲染图片是有多种方法的, Icon ,Image 等等都可以实现将图片放到地图上面,但是操作图片的话,方法比较少了,这里是配合 ol-ext 来实现的. 相关资料: 1. ...
Unity获取组件的几种方式（拖拽法、标签法、名字法）
拖拽法 public GameObject cube;//以托动的形式void Start(){//获取该物体身上的刚体组件Rigidbody r=GetComponent<Rigidbody& ...
Google map地图限制显示区域、拖拽范围
根据坐标限制显示区域.限制地图拖拽范围 function moveLimit(){var strictBounds = new google.maps.LatLngBounds(new google. ...

svg中text标签换行显示,并实现拖拽移动text标签

svg中text标签换行显示,并实现拖拽移动text标签相关推荐

最新文章

热门文章