作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在此代码中,我使用 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/
我是一名优秀的程序员,十分优秀!