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

选中操作就是要在图形边上增加高亮边框和锚点。幸运的是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

直接运行查看

(本文为原创,在引用代码和文字时请注明出处)