可拖动且可调整大小的代码位于此函数内
makeDragableLine('#maindiv #annotationText',jQuery('#maindiv'));
HTML / SVG的部分代码如下:-
<div id="maindiv">
<div id="annotationText">
<svg id="line" height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</div>
</div>
下面是主要功能
function makeDragableLine(selector,obj){
var height=obj.height();
var width=obj.width();
var objdiv = $(selector);
var line = $("#line", objdiv);
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);
}, stop: function( event, ui ) {
console.log('doneDrag1');
var PageNumber=jQuery(event.target).parents('.page').attr('data-page-number');
var parentele=jQuery(event.target)
SaveAnnotation(parentele,PageNumber);
}
}).resizable({
//aspectRatio: 1.0,
handles: 'ne, se, sw, nw',
containment: obj,
minWidth: 40,
minHeight: 40,
resize: function(e, ui) {
line.attr({
width: ui.size.width,
height: ui.size.height
});
$("line", line).attr({
x1: ui.size.width,
y1: ui.size.height,
x2: e.offsetX,
y2: e.offsetY
});
}
});
}
如何使用SVG以正确的方式画线?我能够做到,但不是我想要的方式。我在上面的代码中绘制的线没有沿所有方向跟随可调整大小的指针。
答案 0 :(得分:0)
const SVG_NS = "http://www.w3.org/2000/svg";
let svg = document.querySelector("#lines");
let m = {};// the mouse position
let oLine = {};// an object for the line's attributes
let eLine = null; //the line element
//events
// on mouse down you create the line and append it to the svg element
lines.addEventListener("mousedown", e => {
m = oMousePosSVG(e);
oLine.x1 = m.x;
oLine.y1 = m.y;
oLine.x2 = m.x;
oLine.y2 = m.y;
eLine = drawline(oLine, lines);
});
// on mouse move you update the line
lines.addEventListener("mousemove", e => {
if (eLine) {
m = oMousePosSVG(e);
oLine.x2 = m.x;
oLine.y2 = m.y;
updateLine(oLine, eLine);
}
});
// on mouse up or mouse out the line ends here and you "empty" the eLine and oLine to be able to draw a new line
lines.addEventListener("mouseup", e => {
if (eLine) {
m = oMousePosSVG(e);
eLine = null;
oLine = {};
}
});
lines.addEventListener("mouseout", e => {
if (eLine) {
m = oMousePosSVG(e);
eLine = null;
oLine = {};
}
});
// a function to draw a line in SVG
function drawline(o, parent) {
let line = document.createElementNS(SVG_NS, "line");
for (var name in o) {
if (o.hasOwnProperty(name)) {
line.setAttributeNS(null, name, o[name]);
}
}
parent.appendChild(line);
return line;
}
// a function to update a line in SVG
function updateLine(o, element) {
for (var name in o) {
if (o.hasOwnProperty(name)) {
element.setAttributeNS(null, name, o[name]);
}
}
return element;
}
// a function to detect the mouse position on a resizable SVG element
function oMousePosSVG(ev) {
var p = svg.createSVGPoint();
p.x = ev.clientX;
p.y = ev.clientY;
var ctm = svg.getScreenCTM().inverse();
var p = p.matrixTransform(ctm);
return p;
}
svg{border:1px solid;}
line{stroke:rgb(255,0,0);stroke-width:2;pointer-events:none;}
<div id="maindiv">
<div id="annotationText">
<svg id="lines" height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" />
</svg>
</div>
</div>
观察:如果您需要响应式SVG,请在这种情况下viewBox
viewBox="0 0 210 500"
的宽度和高度属性
如果您需要保存这些行以供以后重复使用,则可以在鼠标移开和离开时将eLine
推入数组。