绘画板 11——拖拽

本贴最后更新于 2956 天前,其中的信息可能已经时移世改

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");
	}
});
  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    406 引用 • 3571 回帖
  • SVG
    24 引用 • 73 回帖
  • Painter
    14 引用 • 31 回帖
  • 拖拽
    2 引用 • 1 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...