9. 调整组件大小--从零起步实现基于Html5的WEB设计器Jquery插件（含源码）

关键字：设计器源代码，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

直接运行查看

（本文为原创，在引用代码和文字时请注明出处）