SVG.js+扩展工具（svg.select.js+svg.resize.js+svg.draggable.js）联合开发画图工具

最新推荐文章于 2024-05-10 12:42:21 发布

菜鸟复仇者联盟

最新推荐文章于 2024-05-10 12:42:21 发布

阅读量3.7k

点赞数 7

文章标签： svg javascript js

本文链接：https://blog.csdn.net/qq_44941500/article/details/105021135

版权

SVG.js+扩展工具（svg.select.js+svg.resize.js+svg.draggable.js）联合开发画图工具

先介绍各个js负责功能模块
svg.js —— 图形绘制、图形层次结构
svg.select.js（svg.select.css） —— 图形选择功能+图形选择样式
svg.resize.js —— 图形拉伸、收缩和旋转
svg.draggable.js ——图形拖动功能

请注意svg的版本问题，由于svg.select.js与3.0以上版本的svg.js暂时不兼容，一旦使用svg.select.js里的selectize方法便会抛出this.parents.set…错误，所以本文采用的svg版本是2.7

画板结构设计

首先对网页页面的功能区域进行划分：
左侧：作为工具选择栏，基础绘图功能：直线、折线、矩形、圆形、文字和图片
上侧：作为菜单栏
中部：作为绘图区域（draw-workarea）
右侧：作为图形属性显示窗口（properties）
下侧：操作提示框

文件准备，引入js文件

// 先导入select.js的样式文件
<link href="${base}static/css/svg.select.min.css"  rel="stylesheet" type="text/css"/>

// 引用js文件
<script src="jquery-1.11.1.min.js"></script>
<script src="svg.min.js"></script>
<script src="svg.select.min.js"></script>
<script src="svg.resize.min.js"></script>
<script src="svg.draggable.js"></script>
// 自定义js文件
<script src="main.js"></script>

前端框架easyUI搭建页面

  <div class="easyui-layout" fit="true">   
    <div data-options="region:'north'" style="height:32px">
      <div style="line-height:30px;padding:0 10px">
       <a href="javascript:void(0)" class="easyui-linkbutton" id="pickProject" data-options="iconCls:'icon-box-project',plain:true" >选项1</a>
       </div>
    </div>
        <!-- 左侧工具栏区域-->
    <div data-options="region:'west'" style="width:160px;">
      <div class="box-menu">
        <dl id="menu1">
         <dt>栏目1</dt>
        </dl>
        <dl id="menu2">
         <dt>栏目2</dt>
        </dl>
        <dl id="menu3">
         <dt>栏目3</dt>
        </dl>
        </div>
    </div>  
    <!-- 画布工作区域-->
    <div data-options="region:'center'" style="background:#eeeeee">
      <div class="box-workarea" id="box-workarea">
      	
      </div>
    </div>   
        <!-- 消息区域-->
    <div data-options="region:'south'" style="height:26px;">
     <div  id="currentProjectMessage"></div>
     <div class="work-message" id="workMessage"><span>暂无消息</span></div>
    </div>
</div>

main.js

在js文件中，创建svg将其命名为svgroot，高和宽我们都设置为100%

var svgRoot = SVG('box-workarea').size('100%','100%').id('svgroot')

在3.0版本svg的创建

var svgRoot = SVG('').addTo('box-workarea').size('100%','100%')id('svgroot')

在svg.js中提供了检测浏览器是否支持svg的方法

if (SVG.supported) {
var svgRoot = SVG('box-workarea').size('100%','100%').id('svgroot')
} else {
  alert('您的浏览器版本不支持SVG，请更换浏览器或者升级版本！')
}

创建完svg后，要创建一层grouproot层用来包裹所有元素，而图形之间连线用group_polyline包裹，每个图形都具有引脚的属性,用作触发连线的点，依次类推；接着用js定义图形对象

var groupRoot = svg.group().id('groupRoot').size('3000px','1500px').attr('style','background-color:white')  // all
var groupPolyLine = groupRoot.group('group_polyline') // 连线层
var selectDrawObjList = []; // 用来存放选中的图形集合
var changeLineX = false; // 连线的起线变换是否位于X轴
var changeLiney = false; // 连线的起线变换是否位于Y轴
var component = new Component();  //创建图形操作对象
var originScale = 1; // 原始比例
var gridNumber = 10; //栅格数（移动步长）
var isSelectBox = false;// 矩形拉选
var isMulSelect = false;// 是否处于多选状态
var isMoveMulSelect = false; // 是否开启批量移动
var currentMousePointer = {}; // 当前点击的点坐标

构造网格线，10为单位

var outpattern = defs.pattern(10, 10, function(add) {
  add.path('M 10 0 L 0 0 0 10').fill('none').stroke({color:'#eee',width:0.5})
  add.pattern(10,10,function(add){
	  add.rect().attr({width:10,height:10,fill:'url(#smallGrid)'})
	  add.path('M 100 0 L 0 0 0 100').fill('none').stroke({color:'#eee',width:1})
	}).attr({'id':'grid'})
}).attr({'id':'smallGrid'})
var gridRect = svgRootGroup.rect().size('3000px','1500px').fill('url(#grid)').id('gridrect') // 网格
	svgRootGroup.add(gridRect)

连线移动产生的十字线的效果

var polylineGroup = svgRootGroup.group().id('polylinegroup') // 连线组对象
var crossLine_X = svgRoot.path('M 0 0').attr({'id':'cross_line_x','stroke-dasharray':'2,2', 'fill':'none','stroke':'red', 'stroke-width':1})
var crossLine_Y = svgRoot.path('M 0 0').attr({'id':'cross_line_y','stroke-dasharray':'2,2', 'fill':'none','stroke':'red', 'stroke-width':1})

矩形选择框

var selectRectBox = svgRoot.rect('0,0').attr({'id':'select_rect_box','stroke-dasharray':'3,3','fill':'none','stroke':'#0000ff','stroke-width':1}).hide()

画板响应事件

画板的响应事件应该对应有：
mousedown、mouseup(移动结束或连线结束)、mousewheel(放大和缩小)、mousemove(移动)、keyup(鼠标按键)、mouseenter(移动画板时触发)、mouseleave(离开画板时触发)

//画布键盘相应事件
$(document).on('keyup',function (e) {
	 switch (e.keyCode) {
        case 46:;break; // 删除
        case 82:;break; //旋转
        //...复制等等
    }
})

svgRoot.on('mousedown',function(e){
	// 判断是否鼠标左键
	if(1 == e.which){
		// 选中图形逻辑等等
		if(){
		}
		
		// 若无选中图形则开启矩形选择
		if (!isSelectBox && isComplatePath) {
		isSelectBox = true
		isMulSelect = false
		isMoveMulSelect = false
		selectRectBox.attr({'x':e.offsetX,'y':e.offsetY,'width':0,'height':0})
		currentMousePointer.x = e.offsetX
		currentMousePointer.y = e.offsetY
		selectRectBox.show()
		return;
		}
	}
})
svgRoot.on('mouseup',function(e){
	if(1 == e.which){
		// 取消矩形选择
		selectRectBox.hide()
	}
})
// 鼠标滚轮发大和缩小
svgRoot.on('mousewheel',function(e){
	var target = $(e.target).context
    var delta = e.originalEvent.wheelDelta
    var scale = originScale;
    originScale = originScale * 10
    if(delta > 0 && originScale < 50)
        originScale += 2
    else if (delta < 0 && originScale > 2 && originScale <= 50)
        originScale -= 2
    originScale = originScale / 10
    var t = svgRoot.transform();
	svgRoot.scale(originScale,(e.offsetX - (t.e + svgRoot.node.clientWidth/2))/scale,(e.offsetY - (t.f + svgRoot.node.clientHeight/2))/scale)
})

// 根据自己需求书写
svgRoot.on('mouseenter',function(e){
})
// 根据自己需求书写
svgRoot.on('mouseleave',function(e){
})
svgRoot.on('mousemove',function(e){
	// 矩形选择
	if (e.which == 1) {
		if (isSelectBox) {
			var x = currentMousePointer.x 
			var y = currentMousePointer.y
			var d = {}
			d.x = Math.abs(x- e.offsetX)
			d.y = Math.abs(y- e.offsetY)
			if (x <= e.offsetX) {
				selectRectBox.attr('x',x);
			}else {
				selectRectBox.attr('x',e.offsetX);
			}
			if (y <= e.offsetY) {
				selectRectBox.attr('y',y);
			}else {
				selectRectBox.attr('y',e.offsetY);
			}
			selectRectBox.size(d.x,d.y)
		}
		// 调用自身的移动方法
		if (isMulSelect && isMoveMulSelect) {
		selectDrawObjList.forEach(function(obj){
			obj.group.dmove(d.x,d.y)
		})
		}
	}
})

图形对象

function DrawObj(){
	this.id='';  // 图形id
	this.displayName=''; // 图形显示名称
	this.value=''; // 数据化操作
	this.foots=[]; // 引脚集合
	this.location='' // 图形左上角坐标
	this.svgcontent='' //svg描述字符串，如'<rect>xxxx</rect>,<line></line>'
	// 定义绘画方法
	this.draw = function(){
	// 每个图形创建一个group
		var group = grouproot.group() 
		var groupfoot = group.group() // 包裹在图形group里
		var objStrList = this.svgcontent.split(',')
		objStrList.forEach(function(v){
		// svg.js有个通过字符串导入svg对象的方法
		var obj = svgroot.svg(v)
		group.add(obj)
		})
		// 添加引脚,用圆形来代替引脚
		this.foots.forEach(function(foot){
			var circle = svgroot.circle().attr({
				id:foot.id,
				cx:foot.x,
				cy:foot.y,
				r:3,
				fill:'#ffffff00' //设置透明色将引脚隐藏
			})
			// 定义移动到引脚上时时间
			circle.on('mouseover',function(e){
				// 显示引脚
				circle.fill('red')
			})
			// 定义点击引脚创建连线事件
			circle.on('mousedown',function(e){
				// 创建连线事件
				createPolyLine()
			})
			// 定义离开引脚事件
			circle.on('mouseout',function(e){
				circle.fill('#ffffff00')
			})
		})
		// 定义group选中方法和resize方法,若是一维图形如直线、折线等，则selectize({deepSelect:true})可添加参数描述
		group.selectize().resize();
		// 定义图形拖动，这里添加一个移动时发生的事件
		group.draggable().on('dragmove', e => {
 			
		})
	}
	  // 删除图形
    this.remove = function(){
    	if (!_this.isLock) {
    		_this.group.remove()
    }
}

连线对象

function SVGPolyline(){
	this.startFoot = null; // 起点引脚对象
	this.endFoot = null; // 终点引脚对象
	this.points=[]; //连线点集合
	// 移动图形时，改变连接处点
	this.moveDrawObj(polyline){
	
	}
}

图形操作对象

function Component(){
	this.id='';
	this.drawObjList=[];
	 // 取消全部选中器件
    this.unSelectAll = function(){
    	selectDrawObjList.forEach(function(v){
    		v.unSelected()
    	})
    }
	// 添加图形
	this.addDrawObj=function(obj){
		
	}
	// 移除图形
	this.removeDrawObj=function(obj){
		obj.remove()
	}
	// 重置画板
	this.resetDrawObj=function(){
		
	}
}
function createPolyLine(){
	var polyLine = svgroot.polyLine()
	...
}

以上代码非完整，请勿全部复制粘贴，仅提供大体的结构思路，欢迎指正和讨论。楼主已经做出了一个版本了（正常使用），这是之前构思的初稿，基本思路没有问题。

菜鸟复仇者联盟

关注

7
点赞
踩
28

收藏

觉得还不错? 一键收藏
16
评论
SVG.js+扩展工具（svg.select.js+svg.resize.js+svg.draggable.js）联合开发画图工具

SVG.js+扩展工具（svg.select.js+svg.resize.js+svg.draggable.js）联合开发画图工具先介绍各个js负责功能模块svg.js —— 图形绘制、图形层次结构svg.select.js（svg.select.css） —— 图形选择功能+图形选择样式svg.resize.js —— 图形拉伸、收缩和旋转svg.draggable.js ——图形拖动...
复制链接

扫一扫