Как реализовать перетаскиваемую функцию в SVG изображения?
В этом коде я использовал Jquery-draggable для установки тега. Это сработало, как вы можете видеть на https://jsbin.com/yekukar/edit?html,css,js
Но мне бы хотелось, чтобы при нажатии на строку ("в коде для угла") событие "onmousemove" перестало отмечать значение угла в этом месте. Я попробовал событие "onclick", но не оно не позволяет плавно провести измерение в нажатой точке.
Пожалуйста, мне нужно кто-нибудь много предложений.
HTML-код SNIPPET - 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 Stackru: http://stackru.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");
});
1 ответ
Непонятно, чего вы пытаетесь достичь, но я подозреваю, что это что-то вроде этого:
- Когда пользователь перемещает мышь, рассчитайте угол
- Когда пользователь нажимает кнопку мыши, прекратите вычислять угол
- Разрешить пользователю перетаскивать
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 Stackru: http://stackru.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, можно вызвать 1-й элемент индекса [0] по мере необходимости. Вы увидите это в updateSVG(), Я также перешел на .attr() по мере необходимости.
follow полезная переменная для отслеживания, если мы должны следить за движением мыши. click событие на svg будет переключать это значение. И выключаем в start и обратно в stop,