[英]How to make SVG tag image resizable using jQuery UI?
I have SVG image like the tag below in div 我有SVG图片,例如以下div中的标签
<div id="MainDiv">
<div id="annotationText">
<svg id="circle" width="50" height="50">
<circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0"/>
</svg>
</div>
</div>
I am making is draggable and resizable. 我正在拖动和调整大小。 draggable is working how to make it resizable, I tried but it is not working. 我尝试过Draggable正在工作,如何使其可调整大小,但没有工作。
makeDragableCircle('#annotationText',jQuery('#MainDiv'));
function makeDragableCircle(selector,obj){
var height=obj.height();
var width=obj.width();
var objdiv=jQuery( selector );
jQuery( selector ).draggable({
containment: obj,
drag: function( event, ui ) {
var cleft=ui.position.left*100/width;
var top=ui.position.top*100/height;
jQuery(event.target).attr('data-offsetx',cleft);
jQuery(event.target).attr('data-offsety',top);
}
}).resizable({
alsoResize: "#"+circle,
aspectRatio: 1.0
});
}
As I mentioned in my comment, resizable, is designed for box models like <div>
, or <span>
. 正如我在评论中提到的那样,可调整大小是为诸如<div>
或<span>
类的盒子模型设计的。 You can use it on the <svg>
element, but it will treat it like an HTML element. 您可以在<svg>
元素上使用它,但是它将像HTML元素一样对待它。
If you want to make use of it to manipulate the stricture of a SVG object, you need to roll your own a bit. 如果要使用它来操纵SVG对象的结构,则需要自己动手。
$(function() { function makeDragableCircle(selector, obj) { var height = obj.height(); var width = obj.width(); var objdiv = $(selector); var circle = $("#circle", objdiv); $(selector).draggable({ containment: obj, drag: function(event, ui) { var cleft = ui.position.left * 100 / width; var top = ui.position.top * 100 / height; $(event.target).attr('data-offsetx', cleft); $(event.target).attr('data-offsety', top); } }).resizable({ aspectRatio: 1.0, containment: obj, minWidth: 40, minHeight: 40, resize: function(e, ui) { circle.attr({ width: ui.size.width, height: ui.size.height }); $("circle", circle).attr({ cx: Math.round(ui.size.width / 2) - 2, cy: Math.round(ui.size.height / 2) - 2, r: Math.round(ui.size.width / 2) - 4 }); } }); } makeDragableCircle('#annotationText', $('#mainDiv')); });
#mainDiv { width: 400px; height: 200px; border: 1px dashed #eee; }
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="mainDiv"> <div id="annotationText"> <svg id="circle" width="50" height="50"> <circle cx="25" cy="25" r="20" stroke="green" stroke-width="4" fill="yellow" fill-opacity="0.0" /> </svg> </div> </div>
As you see, when you drag, it all moves. 如您所见,当您拖动鼠标时,它们都会移动。 When you resize, we adjust the SVG size and we adjust properties of the <circle>
. 调整大小时,我们将调整SVG大小,并调整<circle>
属性。
Hope that helps. 希望能有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.