Snap.svg:元素默认行为的 drag() 问题

我想实现的目标：

我有以下两个目标，我正在努力实现：

我需要嵌入在 SVG 文档中的单行/多行可编辑文本输入字段。
这些字段必须具有拖动功能。

使文本字段成为 SVG 的一部分的目的是在缩放 SVG 文档编写任何多余的代码时缩放它们。

为了完成这两个任务，我正在使用 Snap.svg 库。

到目前为止我做了什么：

SVG 有一个foreignObject元素，允许我们在 SVG 中嵌入任何 HTML 标记。因此，使用此功能，我在 SVG 中添加了input和textarea字段。

下面是一个演示：

var s = Snap('#demo');
var defualtWidth = s.attr('width');
var defualtHeight = s.attr('height');
var fobjectSVG = '<foreignObject x="30" y="40" width="240" height="40"><input type="text" class="form-control"placeholder="Some dummy text here..." /></foreignObject>';
s.append(Snap.parse(fobjectSVG));
$('.select-zoom').change(function(event) {
	var zoomRatio = $(this).val();
	s.attr({
		'width': defualtWidth * zoomRatio,
		'height': defualtHeight * zoomRatio
	});
});

.form-control {
	border: 3px solid #000;
	padding: 3px 10px;
	background: #fff;
	display: block;
	height: 100%;
	width: 100%;
	margin: 0;
}
.select-zoom {
position: absolute;
	width: 100px;
	height: 30px;
right: 40px;
top: 50px;
z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<svg id="demo" width="700" height="550" viewBox="0 0 700 550">
<image x="0" y="0" width="100%" height="550" href="https://i.imgur.com/waDgcnc.jpg" />
</svg>
<select class="select-zoom">
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1" selected="selected">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
<option value="2.5">250%</option>
<option value="5">500%</option>
</select>

添加拖动功能：

Snap.svg 有一个.drag()函数，可在调用元素时将拖动功能附加到元素。

下面是一个演示：

var s = Snap('#demo');
var rect = s.rect(30, 30, 240, 120).attr({stroke: '#000', 'strokeWidth': 3, fill: '#2ecc40'});
rect.drag();

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<svg id="demo" width="700" height="550" viewBox="0 0 700 550">
<image x="0" y="0" width="100%" height="550" href="https://i.imgur.com/waDgcnc.jpg" />
</svg>

问题出在哪里？

当我在这个foreignObject上调用.drag()函数时，它里面的input/textarea字段会停止它们的正常行为。似乎他们的默认行为以某种方式被取消了。

下面是问题的演示：

var s = Snap('#demo');
var defualtWidth = s.attr('width');
var defualtHeight = s.attr('height');
var fobjectSVG = '<foreignObject x="30" y="40" width="240" height="40"><input type="text" class="form-control"placeholder="Some dummy text here..." /></foreignObject>';
var fobjectSVG2 = '<foreignObject x="30" y="100" width="240" height="120"><textarea class="form-control" placeholder="Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, "></textarea></foreignObject>';
var field = s.group().append(Snap.parse(fobjectSVG));
var field2 = s.group().append(Snap.parse(fobjectSVG2));
field.drag();
field2.drag();
$('.select-zoom').change(function(event) {
	var zoomRatio = $(this).val();
	s.attr({
		'width': defualtWidth * zoomRatio,
		'height': defualtHeight * zoomRatio
	});
});

.form-control {
	border: 3px solid #000;
	padding: 3px 10px;
	background: #fff;
	display: block;
	height: 100%;
	width: 100%;
	margin: 0;
}
.select-zoom {
position: absolute;
	width: 100px;
	height: 30px;
right: 40px;
top: 50px;
z-index: 10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
<svg id="demo" width="700" height="550" viewBox="0 0 700 550">
<image x="0" y="0" width="100%" height="550" href="https://i.imgur.com/waDgcnc.jpg" />
</svg>
<select class="select-zoom">
<option value="0.5">50%</option>
<option value="0.75">75%</option>
<option value="1" selected="selected">100%</option>
<option value="1.25">125%</option>
<option value="1.5">150%</option>
<option value="2">200%</option>
<option value="2.5">250%</option>
<option value="5">500%</option>
</select>

正如您在上面的演示中看到的，字段正在拖动，但我无法像普通输入/文本区域字段那样编辑它们的文本。

问题是什么？

我想启用他们目前以某种方式禁用的默认 behaior。有人可以解释为什么会发生这种情况以及如何解决此问题吗？

欢迎所有解决方案，无论它们属于此库还是其他库。

编辑：

文本字段的文本选择可以禁用，在我的情况下不需要。

注意：IE浏览器不支持异物，因此如果您使用的是IE，则上述示例可能不起作用。然而它是受 MS 边缘浏览器支持。

在具有 contentEditable 的外来对象中尝试 DIV。下面是一个没有 Snap.drag() 但使用标准 svg 拖动方法的示例：注： Edge 浏览器要求外来对象宽度/高度=100%

<!DOCTYPE HTML>
<html>
<head>
<title>Drag foreignObject DIV</title>
</head>
<body>
<div style=background:gainsboro;width:300px;height:300px >
<svg id="mySVG" width="300" height="300"   onmouseup="endDrag()"   onmousemove="drag(evt)" >
<foreignObject id="dragTarget"  transform="translate(24 40)" width="100%" height="100%"><div id=myDiv onmousedown="startDrag();this.contentEditable='false'" style='border:2px solid black;width:150px;height:50px;overflow:auto' contentEditable="true" >This is my text</div></foreignObject>
</svg>
</div>
<script>
var TransformRequestObj
var TransList
var DragTarget=null;
var Dragging = false;
var DragStartGrabX = 0;
var DragStartGrabY = 0;
//---mouse down over element---
function startDrag()
{
	if(!Dragging) //---prevents dragging conflicts on other draggable elements---
	{
			DragTarget = document.getElementById("dragTarget")
			//---reference point to its respective viewport--
			var pnt = DragTarget.ownerSVGElement.createSVGPoint();
			pnt.x = event.clientX
			pnt.y = event.clientY
			//---elements transformed and/or in different(svg) viewports---
			var sCTM = DragTarget.getScreenCTM();
			var Pnt = pnt.matrixTransform(sCTM.inverse());
			TransformRequestObj = DragTarget.ownerSVGElement.createSVGTransform()
			//---attach new or existing transform to element, init its transform list---
			var myTransListAnim=DragTarget.transform
			TransList=myTransListAnim.baseVal
//---the point on the element to grab as its dragging point---
			DragStartGrabX = Pnt.x
			DragStartGrabY = Pnt.y
			Dragging=true;
	}
}
//---mouse move---
function drag(evt)
{
	if(Dragging)
	{
		var pnt = DragTarget.ownerSVGElement.createSVGPoint();
		pnt.x = evt.clientX;
		pnt.y = evt.clientY;
		//---elements in different(svg) viewports, and/or transformed ---
		var sCTM = DragTarget.getScreenCTM();
		var Pnt = pnt.matrixTransform(sCTM.inverse());
		Pnt.x -= DragStartGrabX;
		Pnt.y -= DragStartGrabY;
		TransformRequestObj.setTranslate(Pnt.x,Pnt.y)
		TransList.appendItem(TransformRequestObj)
		TransList.consolidate()
	}
}
//--mouse up---
function endDrag()
{
	Dragging = false ;
myDiv.contentEditable="true"

}
</script>
</body>
</html>

相关内容

最新更新

热门标签：