绘画板 11——拖拽

github地址： https://github.com/wangyuheng/painter

DEMO地址： http://painter.crick.wang/

拖拽

使用svgjs官方推荐的拖拽插件https://github.com/wout/svg.draggable.js 实现元素的拖拽效果

暴露了4种事件监听

• beforedrag
• dragstart
• dragmove (you can call preventDefault on this one)
• dragend

可以根据需要结合。

在Element 的mouseover事件监听中，执行 _ele.draggable(); 方法，实现元素的可拖拽效果

为了避免拖拽后，触发click事件，导致pick状态变更，在这里监听了dragend事件，并将pick状态设置为未选中，则click事件触发时，一定会处理为选中。

(function() {

    SVG.extend(SVG.Doc, {
        transformPoint: function(event) {
            event = event || window.event;
            var touches = event.changedTouches && event.changedTouches[0] || event;
            var node = this.node;
            var point = node.createSVGPoint();
            point.x = touches.pageX - window.scrollX;
            point.y = touches.pageY - window.scrollY;
            var matrix = node.getScreenCTM().inverse();
            return point.matrixTransform(matrix);
        }
    });

    SVG.extend(SVG.Element, {
        pickable: function(enabled) {
            var _ele = this;
            GlobalStatus.pushElements(_ele);
            var color = _ele._stroke;
            var width = _ele.attr("stroke-width");
            _ele.on("mouseover", function() {
                console.log("element mouseover");
                if (GlobalStatus.isPicked()) {
                    _ele.stroke({
                        width: width * 2,
                        color: 'red'
                    });
                    $("#svgPanel").css("cursor", "pointer");
                    _ele.draggable();
                    return false;
                } else if (GlobalStatus.isPreFilled()) {
                    $("#svgPanel").css("cursor", "url(style/img/cur/tool_fill.cur), auto");
                } else if (GlobalStatus.isRecycle()) {
                    $("#svgPanel").css("cursor", "url(style/img/cur/tool_delete.cur), auto");
                }
                _ele.draggable(false);

            });
            _ele.on("mouseout", function() {
                if (GlobalStatus.isPicked()) {
                    _ele.stroke({
                        width: width,
                        color: color
                    });
                    $("#svgPanel").css("cursor", "default");
                } else if (GlobalStatus.isPreFilled()) {
                    $("#svgPanel").css("cursor", "default");
                } else if (GlobalStatus.isRecycle()) {
                    $("#svgPanel").css("cursor", "default");
                }

            });
            _ele.on("click", function() {
                console.log("click");
                if (GlobalStatus.isPreFilled()) {
                    if ($("#fill_color").hasClass("active")) {
                        _ele.fill(GlobalStatus.getFillColor());
                        _ele.style("fill-opacity", GlobalStatus.getFillOpacity());
                    } else {
                        _ele.style("stroke", GlobalStatus.getFontColor());
                    }

                } else if (GlobalStatus.isPicked()) {
                    if (_ele.attr("picked")) {
                        _ele.fire("unPick");
                    } else {
                        _ele.fire("pick");
                    }

                } else if (GlobalStatus.isRecycle()) {
                    _ele.remove();
                }
            });
            _ele.on("mousedown", function(event) {
                console.log("element mousedown");
                if (GlobalStatus.isPicked()) {
                    event.preventDefault();
                    event.stopPropagation();
                    return false;
                }
            });

            _ele.on("dragend", function(event) {
                console.log("element dragend");
                _ele.fire("unPick");
            });
            _ele.on("beforedrag", function(event) {
                console.log("element beforedrag");
            });
            _ele.on("pick", function() {
                console.log("pick");
                _ele.attr("picked", true);
                _ele.handleBorder = _ele.handleBorder || new HandleBorder(svgDoc);
                _ele.handleBorder.showShade(_ele);
                GlobalStatus.pushPicked(_ele);
            });
            _ele.on("unPick", function() {
                console.log("unPick");
                _ele.attr("picked", null);
                _ele.handleBorder && _ele.handleBorder.hideShade(_ele);
                GlobalStatus.removePicked(_ele);

            });
            return this;
        }

    });
})();

mouseover中的draggable();和 dragend事件中的fire(“unPick”);都不是很好的设计，需要重构。

bug修复

dragend事件中的fire(“unPick”)

针对dragend事件中的fire(“unPick”); 修改设计思路，在element记录开始拖拽时的坐标点数据，和dragend进行比较，如果坐标改变，表示元素发生移动，则按拖拽处理，需要触发fire(“unPick”); 否则，按照click事件处理。

_ele.dragStartPoint = null;
_ele.on("dragstart", function(event) {
    console.log("element dragstart");
    _ele.dragStartPoint = event.detail.p;
});
_ele.on("dragend", function(event) {
    console.log("element dragend");
    if (_ele.dragStartPoint.x == event.detail.p.x && _ele.dragStartPoint.y == event.detail.p.y) {

    } else {
        _ele.fire("unPick");
    }
});