基于extjs4 + svg工作流编辑器设计

用svg做一个简单的画板编辑器,实现图形自动创建,拖动,多选,单选,画框,连线,数据绑定,保存,修改等功能,如图:


主要讲下几个关键的点;

1、关于左侧菜单栏拖动图形到画板上自动生成相应的图形主要是这个组件“Ext.dd.DropTarget”,如:

Ext.create('Ext.dd.DropTarget', body, {
	ddGroup: 'model-to-canvas', 
	notifyEnter: function (ddSource, e, data) {
		//Add some flare to invite drop.
	},
	notifyDrop: function (ddSource, e, data) {
		//dosomething
	}
});


2、画板图形的分类:

主要有三类有效图形,无效图形及工具图形,以id为key通过对象方式进行存储,方便后续的拖动,连线,删除等操作

//有效图形
me.validGraphs = {};
//无效图形
me.invalidGraphs = {};
//工具图形
me.tools = {};
//选择框内图形
me.selectGraphs = {};


3、如何框中选中的图形:

根据中心点原理,手动画出的边框,计算四个角的坐标,然后遍历有效图形,在有效图形中若中心点再边框内,则认为选中,效果如图



4、图形连线

双击图形,获取鼠标点击的当前图形,自动生成一根箭头,此时如果再点击空白画板,则默认该点击点为直线的折点,点击下一个图形时自动连接完成如图:



至于如何判断从哪个角度进行连接,我是通过向量的方式,因为画板坐标是知道的,以其中一个图形中心为坐标原点,根据向量基本定理计算,代码如下:

getPoint: function (x1, y1, x2, y2, w1, h1) {
	var point = {};
	var sMinX = (x1 - w1 / 2);
	var sMinY = (y1 - h1 / 2);
	var sMaxX = (x1 + w1 / 2);
	var sMaxY = (y1 + h1 / 2);
	if (x2 <= x1 && y2 < y1) {//第一向限
		var sX = calculation_getX(sMinY);
		if (sX >= sMinX) {
			point = {pointX: sX, pointY: sMinY};
		} else {
			point = {pointX: sMinX, pointY: calculation_getY(sMinX)};
		}
	} else if (x2 > x1 && y2 <= y1) {//第二向限
		var sX = calculation_getX(sMinY);
		if (sX <= sMaxX) {
			point = {pointX: sX, pointY: sMinY};
		} else {
			point = {pointX: sMaxX, pointY: calculation_getY(sMaxX)};
		}
	} else if (x2 < x1 && y2 >= y1) {//第三向限
		var sX = calculation_getX(sMaxY);
		if (sX >= sMinX) {
			point = {pointX: sX, pointY: sMaxY};
		} else {
			point = {pointX: sMinX, pointY: calculation_getY(sMinX)};
		}
	} else if (x2 >= x1 && y2 > y1) {//第四向限
		var sX = calculation_getX(sMaxY);
		if (sX <= sMaxX) {
			point = {pointX: sX, pointY: sMaxY};
		} else {
			point = {pointX: sMaxX, pointY: calculation_getY(sMaxX)};
		}
	}
	function calculation_getX(y) {
		if (y2 != y1) {
			return (y - y1) * (x2 - x1) / (y2 - y1) + x1;
		} else {
			return x2;
		}
	}
	function calculation_getY(x) {
		if (x2 != x1) {
			return (x - x1) * (y2 - y1) / (x2 - x1) + y1;
		} else {
			return y2;
		}
	}
	return point;
},


ps:这是初期做法,可以再进一步优化;


大概就讲这些吧


欢迎加群611981770







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值