4. 设计时的组件选择与移动从零起步实现基于Html5的WEB设计器Jquery插件（含源码）

众所周知，设计器在组件拖到设计视图上需要选中（选中后设置属性），拖动变换位置，前面示例已经可以将圆、矩形、椭圆拖到设计器上了，本文详细说明如何选中和拖动。

选中操作就是要在图形边上增加高亮边框和锚点。幸运的是paper.js提供选择/取消选择的方法（具体参考paperjs.org)。

代码片断：（创建时每一个形状注册一个onClick事件，选择/取消选择元素）

        this.$element.on("drop", function (event) {
            event.preventDefault();
            debugger;
            var data = null;
            if (event.dataTransfer == undefined && event.originalEvent != undefined)
                data = event.originalEvent.dataTransfer.getData("type");
            else if (event.dataTransfer != undefined)
                data = event.dataTransfer.getData("type");
            switch (data) {
                case "圆":
                    var circle = new paper.Path.Circle({
                        center: [event.originalEvent.offsetX, event.originalEvent.offsetY],
                        radius: 25,
                        fillColor: 'blue'
                    });
                    circle.onClick= function (event) {
                        circle.selected = !circle.selected ;
                    }
                    break;
                case "矩形":
                    var rect = new paper.Path.Rectangle({
                        point: [event.originalEvent.offsetX, event.originalEvent.offsetY],
                        size: [100, 100],
                        radius: 5,
                        strokeWidth: 1,
                        strokeColor: me.options.color,
                        fillColor: me.options.color,
                        opacity: me.node_opacity
                    });
                    rect.onClick = function (event) {
                        rect.selected = !rect.selected;
                    }
                    break;
                case "椭圆":
                    var path = new paper.Path.Ellipse({ point: [event.originalEvent.offsetX, event.originalEvent.offsetY], size: [120, 60], fillColor: 'green' });
                    path.onClick = function (event) {
                        path.selected = !path.selected;
                    }
            }
        });

选取的效果如下图示：

同样，拖动的效果也基于paper.js提供的元素上的onMouseDrag事件：

            var drag = false;
            switch (data) {
                case "圆":
                    var circle = new paper.Path.Circle({
                        center: [event.originalEvent.offsetX, event.originalEvent.offsetY],
                        radius: 25,
                        fillColor: 'blue'
                    });
                    circle.onClick= function (event) {
                        circle.selected = !circle.selected ;
                    }
                    circle.onMouseDown = function (event)
                    {
                        drag = (event.event.button == 0);
                    }
                    circle.onMouseUp = function () {
                        drag = false;
                        document.body.style.cursor = 'default';

                    }
                    circle.onMouseDrag = function (event) {
                        if (drag ) {
                            circle.translate(event.delta.x, event.delta.y);
                            document.body.style.cursor = 'move';
                        }
                    }
                    break;

如上图，注意增加了一个变量drag用于指示当前是在拖动状态，在onMouseDown时设置，在松开鼠标onMouseUp时取消，在拖动过程中变更当前位置，注意paperjs提供的translate方法。同时在拖动时设置鼠标形状为拖动状，松开时恢复默认的箭头状。

本节介绍就到这里，paperjs提供了许多的形状，事件，大家可以从paperjs.org官网了解更多，站在巨人的肩膀总比独自从造轮子来得要快。

本节源代码下载：sample1.2

直接运行查看

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