关键字:设计器源代码,Web设计器,工作流设计器,jQuery插件,组态设计器,SCADA系统设计器,流程图设计,表单设计建模,报表设计,可视化,设计时,运行时,轻量级开放平台.
组件应该可以被调整大小,正常的操作是鼠标选中组件后,组件四个方向的边框上出现锚点,鼠标拖动锚点到目标位置后松开,重绘组件及与此相连的所有连线。
下图为选中后的锚点示意图:
代码上,单独做了一个resizer用于管理四个锚点的显示,同时component增加resize方法。
function Resizer(node) { this.node = node; this.group = null; } Resizer.prototype = { destroy: function () { this.group.remove(); }, hiTest: function (event) { var bounds = this.node.getBound(); if (event.point.x >= bounds.x - 3 && event.point.x <= bounds.x && event.point.y >= bounds.y + bounds.height / 2 - 1.5 && event.point.y <= bounds.y + bounds.height / 2 + 1.5) { document.body.style.cursor='w-resize'; return "left"; } else if (event.point.x >= bounds.x + bounds.width && event.point.x <= bounds.x + bounds.width + 3 && event.point.y >= bounds.y + bounds.height / 2 - 1.5&& event.point.y <= bounds.y + bounds.height / 2 + 1.5) { //在右连线指示器框中 document.body.style.cursor='e-resize'; return "right"; } else if (event.point.x >= bounds.x + bounds.width / 2 - 1.5 && event.point.x <= bounds.x + bounds.width / 2 + 1.5 && event.point.y >= bounds.y - 3 && event.point.y <= bounds.y ) { //在上连线指示器框中 document.body.style.cursor='n-resize'; return "up"; } else if (event.point.x >= bounds.x + bounds.width / 2 -1.5 && event.point.x <= bounds.x + bounds.width / 2 + 1.5 && event.point.y >= bounds.y + bounds.height && event.point.y <= bounds.y + bounds.height+3) { //在下连线指示器框中 document.body.style.cursor='s-resize'; return "down" } else { document.body.style.cursor='default'; return null; } }, getDelta:function(direction,sourcePos,targetPos){ if (direction=="left") return sourcePos.x-targetPos.x; if (direction=="right") return targetPos.x-sourcePos.x; if (direction=="up") return sourcePos.y-targetPos.y; if (direction=="down") return targetPos.y-sourcePos.y; }, render: function () { var me = this; var color = 'white'; this.group = new paper.Group(); var bounds = this.node.getBound(); var topCross1 = new paper.Path.Rectangle({ point: [bounds.x + bounds.width / 2 - 1.5, bounds.y - 3], size:[3,3], strokeColor: 'blue',fillColor:'blue' }); this.group.addChild(topCross1); var rightCross1 = new paper.Path.Rectangle({ point: [bounds.x + bounds.width, bounds.y + bounds.height / 2 - 1.5],size: [3,3], strokeColor: 'blue' ,fillColor:'blue'}); this.group.addChild(rightCross1); var leftCross1 = new paper.Path.Rectangle({ point: [bounds.x - 3, bounds.y + bounds.height / 2 - 1.5], size: [3,3], strokeColor: 'blue' ,fillColor:'blue'}); this.group.addChild(leftCross1); var bottomCross1 = new paper.Path.Rectangle({ point: [bounds.x + bounds.width / 2 - 1.5, bounds.y + bounds.height ], size: [3,3], strokeColor: 'blue' ,fillColor:'blue'}); this.group.addChild(bottomCross1); this.group.bringToFront(); var drag = false; var originalPos=null; var tool=new paper.Tool(); this.group.onMouseMove=function(event){ me.hiTest(event) } this.group.onMouseDown=function(event) //在当前resizer上按下鼠标 { originalPos=event; //记录鼠标按下的位置 drag=true; tool.activate(); } tool.onMouseUp=function(event) //在设计器其它位置释放(包括自身:缩小的情形) { //调整组件大小,并重绘组件和与之关联的所有连线 if (drag){ var direction=me.hiTest(originalPos); me.node.resize(direction,me.getDelta(direction,originalPos.point,event.point)).redrawLines(); drag=false; } } tool.onMouseDrag=function(event) //在设计器其它位置拖放(包括自身:缩小的情形) { //调整组件大小,并重绘组件和与之关联的所有连线 } return this; } };
组件可以依据不同调整大小的方式,来重写resize方法。
源代码:sample.1.7.rar
(本文为原创,在引用代码和文字时请注明出处)