在此代码中，我使用 Jquery-draggable 来设置标签。它有效，正如您在 https://jsbin.com/yekukar/edit?html,css,js 中看到的那样
但是我希望当单击该行时(“在角度代码中”)，事件“onmousemove”停止在该位置标记角度值。我尝试了“onclick”事件，但它不允许在点击点顺利进行测量。
拜托，我需要任何人的建议。非常感谢!
HTML 片段 - CODIGO COMPLETO EM https://jsbin.com/yekukar/edit?html,css,js
<svg class="ang" width="100%" height="500">
<path d="M 1000 300 L 800 300" class="deg45" transform="rotate(0 300 300)">
</path>
<text text-anchor="left" x="850" y="300" style="font-size: 15pt;" transform="rotate(0 300 300)">0 degrees</text>
<circle cx="900" cy="300" id="center" r="2" />
<circle cx="900" cy="300" id="dynamic" r="2" fill="none" />
<path id="deg" d="M 300 300 L 400 300" stroke="#000" stroke-width="1px" />
<text text-anchor="left" x="0" y="100" id="txt" style="font-size: 20pt;" transform="rotate(45 100 100)"></text>
JS 代码片段
var center = document.querySelector("#center"),
dynamic = document.querySelector("#dynamic"),
path = document.querySelector("#deg"),
svg = document.querySelector("svg"),
txt = document.querySelector("#txt"),
svgNS = svg.namespaceURI,
degree = String.fromCharCode(176),
arrows = String.fromCharCode(845);
function Point(x, y) {
return {
"X": x,
"Y": y
};
}
// Credits goes to Stackoverflow: http://stackoverflow.com/a/14413632
function getAngleFromPoint(point, centerPoint) {
var dy = (point.Y - centerPoint.Y),
dx = (point.X - centerPoint.X);
var theta = Math.atan2(dy, dx);
var angle = (((theta * 180) / Math.PI)) % 360;
angle = (angle < 0) ? 360 + angle : angle;
return angle;
}
// Credits goes to http://snipplr.com/view/47207/
function getDistance(point1, point2) {
var xs = 0;
var ys = 0;
xs = point2.X - point1.X;
xs = xs * xs;
ys = point2.Y - point1.Y;
ys = ys * ys;
return Math.sqrt(xs + ys);
}
function fitSVG() {
var width = window.innerWidth,
height = window.innerHeight;
svg.setAttribute("width", width);
svg.setAttribute("height", height);
}
svg.onmousemove = function (e) {
var centerPoint = new Point(center.getAttribute("cx"), center.getAttribute("cy"));
var point = new Point(e.clientX, e.clientY);
var angle = Math.round(100 * getAngleFromPoint(point, centerPoint)) / 100;
var distance = Math.round(getDistance(point, centerPoint));
var d = "M " + centerPoint.X + " " + centerPoint.Y + " L " + point.X + " " + point.Y;
path.setAttribute("d", d);
txt.setAttribute("x", point.X);
txt.setAttribute("y", point.Y);
txt.textContent = distance + arrows + " (" + angle + degree + ")";
txt.setAttribute("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")");
dynamic.setAttribute("r", distance);
fitSVG();
}
//JQUERY DRAGGABLE
grid_size = 10;
$(" .ang")
.draggable({
grid: [grid_size, grid_size]
})
.on("mouseover", function () {
$(this).addClass("move-cursor")
})
.on("mousedown", function () {
$(this)
.removeClass("move-cursor")
.addClass("grab-cursor")
.addClass("opac");
$(" .text ").hide();
})
.on("mouseup", function () {
$(this)
.removeClass("grab-cursor")
.removeClass("opac")
.addClass("move-cursor");
});
最佳答案
目前尚不清楚你想要完成什么，但我怀疑它是这样的:
- 当用户移动鼠标时，计算角度
- 当用户点击鼠标时，停止计算角度
- 允许用户拖动
svg，并且在发生这种情况时不计算角度
希望这有帮助:
代码:https://jsfiddle.net/Twisty/8fy76yrt/24/
显示:https://jsfiddle.net/Twisty/8fy76yrt/24/show/
JavaScript
$(function() {
var center = $("#center"),
dynamic = $("#dynamic"),
path = $("#deg"),
svg = $("svg"),
txt = $("#txt"),
svgNS = svg[0].namespaceURI,
degree = String.fromCharCode(176),
arrows = String.fromCharCode(845),
follow = true;
function Point(x, y) {
return {
"X": x,
"Y": y
};
}
// Credits goes to Stackoverflow: http://stackoverflow.com/a/14413632
function getAngleFromPoint(point, centerPoint) {
var dy = (point.Y - centerPoint.Y),
dx = (point.X - centerPoint.X);
var theta = Math.atan2(dy, dx);
var angle = (((theta * 180) / Math.PI)) % 360;
angle = (angle < 0) ? 360 + angle : angle;
return angle;
}
// Credits goes to http://snipplr.com/view/47207/
function getDistance(point1, point2) {
var xs = 0;
var ys = 0;
xs = point2.X - point1.X;
xs = xs * xs;
ys = point2.Y - point1.Y;
ys = ys * ys;
return Math.sqrt(xs + ys);
}
function fitSVG() {
var width = window.innerWidth,
height = window.innerHeight;
svg.width(width);
svg.height(height);
}
function updateSVG(e) {
if (follow) {
var centerPoint = new Point(center[0].getAttribute("cx"), center[0].getAttribute("cy"));
var point = new Point(e.clientX, e.clientY);
var angle = Math.round(100 * getAngleFromPoint(point, centerPoint)) / 100;
var distance = Math.round(getDistance(point, centerPoint));
var d = "M " + centerPoint.X + " " + centerPoint.Y + " L " + point.X + " " + point.Y;
path.attr("d", d);
txt.attr("x", point.X);
txt.attr("y", point.Y);
txt.html(distance + arrows + " (" + angle + degree + ")");
txt.attr("transform", "rotate(" + angle + " " + point.X + " " + point.Y + ")");
dynamic.attr("r", distance);
}
fitSVG();
}
grid_size = 10;
svg
.mousemove(updateSVG)
.click(function() {
follow = !follow;
return true;
})
.draggable({
classes: {
"ui-draggable-dragging": "opac"
},
cursor: "grab",
grid: [grid_size, grid_size],
start: function(e, ui) {
$(this).find(".text").hide();
follow = false;
},
stop: function() {
follow = true;
}
});
});
有很多变化。我更喜欢保留尽可能多的 jQuery，并且尽可能不混合代码。所以我将所有 jQuery 对象分配给变量。要使用正确的 SVG 属性，可以根据需要调用第一个元素索引 [0]。您将在 updateSVG() 中看到这一点。我还根据需要切换到 .attr()。
follow 是一个有用的变量，可以跟踪我们是否应该跟随鼠标移动。 svg 上的 click 事件将切换此值。此外，我们在 start 中将其关闭，并在 stop 中重新打开。
关于jquery - 如何在svg图像中实现可拖动功能？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43987733/