固定位置鼠标光标
Fix position mouse cursor
当我将 svg(red) 拖到屏幕上的另一个位置时,光标鼠标失去了原来的 angular 位置(滞后)并指向空白区域...我使用了 var dx 和 dy在 "var point e.clientx" 中修复它,但未成功...有什么建议吗?
代码:http://jsfiddle.net/rebecavascon/evgLhdz3/2/
显示:http://jsfiddle.net/rebecavascon/evgLhdz3/2/show/
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();
}
创建偏移对我的测试有效。
代码:http://jsfiddle.net/Twisty/8zx8p2wf/19/
工作:http://jsfiddle.net/Twisty/8zx8p2wf/19/show/
添加函数 getCenter()
function getCenter(target) {
var b, x, y, w, h, cx, cy;
b = target[0].getBoundingClientRect();
console.log(target, b);
x = b.x;
y = b.y;
w = b.width;
h = b.height;
cx = x + (w / 2);
cy = y + (h / 2);
console.log(x, y, w, h, cx, cy);
return {
X: cx,
Y: cy
};
}
这将获取 SVG 对象的真正中心。看起来 cx
和 cy
属性没有更新。
更新函数updateSVG()
function updateSVG(e) {
if (follow) {
var centerPoint = getCenter(center);
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 od = {
p: {
X: point.X - offset.X,
Y: point.Y - offset.Y
},
cp: {
X: centerPoint.X - offset.X,
Y: centerPoint.Y - offset.Y
}
};
var d = "M" + od.p.X + "," + od.p.Y + " L" + od.cp.X + "," + od.cp.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();
}
这使用了新的 offset
常量变量和正确的中心点。
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,
startPos,
endPos,
offset = {
X: 0,
Y: 0
};
function Point(x, y) {
return {
"X": x,
"Y": y
};
}
function getCenter(target) {
var b, x, y, w, h, cx, cy;
b = target[0].getBoundingClientRect();
console.log(target, b);
x = b.x;
y = b.y;
w = b.width;
h = b.height;
cx = x + (w / 2);
cy = y + (h / 2);
console.log(x, y, w, h, cx, cy);
return {
X: cx,
Y: cy
};
}
// Credits goes to Whosebug:
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 centerPoint = getCenter(center);
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 od = {
p: {
X: point.X - offset.X,
Y: point.Y - offset.Y
},
cp: {
X: centerPoint.X - offset.X,
Y: centerPoint.Y - offset.Y
}
};
var d = "M" + od.p.X + "," + od.p.Y + " L" + od.cp.X + "," + od.cp.Y;
$("#mouse").html(e.clientX + "," + e.clientY);
$("#svgPos").html(svg.position().left + "," + svg.position().top);
$("#offset").html(offset.X + "," + offset.Y);
$("#centerPoint").html(centerPoint.X + "," + centerPoint.Y);
$("#point").html(point.X + "," + point.Y);
$("#path").html(d);
$("#angle").html(angle);
$("#distance").html(distance);
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;
});
$(".img").draggable({
handle: "svg",
classes: {
"ui-draggable-dragging": "opac"
},
cursor: "grab",
grid: [grid_size, grid_size],
start: function(e, ui) {
$(this).find(".text").hide();
follow = false;
startPos = ui.position;
},
stop: function() {
follow = true;
endPos = svg.position();
offset.X = endPos.left;
offset.Y = endPos.top;
}
});
});
通过测试,我对draggable做了一点调整,div.img
wrapper是draggable,里面的svg
是handle。我不确定这里是否有好处,但我不想让它被忽视。
当我将 svg(red) 拖到屏幕上的另一个位置时,光标鼠标失去了原来的 angular 位置(滞后)并指向空白区域...我使用了 var dx 和 dy在 "var point e.clientx" 中修复它,但未成功...有什么建议吗?
代码:http://jsfiddle.net/rebecavascon/evgLhdz3/2/
显示:http://jsfiddle.net/rebecavascon/evgLhdz3/2/show/
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();
}
创建偏移对我的测试有效。
代码:http://jsfiddle.net/Twisty/8zx8p2wf/19/
工作:http://jsfiddle.net/Twisty/8zx8p2wf/19/show/
添加函数 getCenter()
function getCenter(target) {
var b, x, y, w, h, cx, cy;
b = target[0].getBoundingClientRect();
console.log(target, b);
x = b.x;
y = b.y;
w = b.width;
h = b.height;
cx = x + (w / 2);
cy = y + (h / 2);
console.log(x, y, w, h, cx, cy);
return {
X: cx,
Y: cy
};
}
这将获取 SVG 对象的真正中心。看起来 cx
和 cy
属性没有更新。
更新函数updateSVG()
function updateSVG(e) {
if (follow) {
var centerPoint = getCenter(center);
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 od = {
p: {
X: point.X - offset.X,
Y: point.Y - offset.Y
},
cp: {
X: centerPoint.X - offset.X,
Y: centerPoint.Y - offset.Y
}
};
var d = "M" + od.p.X + "," + od.p.Y + " L" + od.cp.X + "," + od.cp.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();
}
这使用了新的 offset
常量变量和正确的中心点。
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,
startPos,
endPos,
offset = {
X: 0,
Y: 0
};
function Point(x, y) {
return {
"X": x,
"Y": y
};
}
function getCenter(target) {
var b, x, y, w, h, cx, cy;
b = target[0].getBoundingClientRect();
console.log(target, b);
x = b.x;
y = b.y;
w = b.width;
h = b.height;
cx = x + (w / 2);
cy = y + (h / 2);
console.log(x, y, w, h, cx, cy);
return {
X: cx,
Y: cy
};
}
// Credits goes to Whosebug:
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 centerPoint = getCenter(center);
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 od = {
p: {
X: point.X - offset.X,
Y: point.Y - offset.Y
},
cp: {
X: centerPoint.X - offset.X,
Y: centerPoint.Y - offset.Y
}
};
var d = "M" + od.p.X + "," + od.p.Y + " L" + od.cp.X + "," + od.cp.Y;
$("#mouse").html(e.clientX + "," + e.clientY);
$("#svgPos").html(svg.position().left + "," + svg.position().top);
$("#offset").html(offset.X + "," + offset.Y);
$("#centerPoint").html(centerPoint.X + "," + centerPoint.Y);
$("#point").html(point.X + "," + point.Y);
$("#path").html(d);
$("#angle").html(angle);
$("#distance").html(distance);
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;
});
$(".img").draggable({
handle: "svg",
classes: {
"ui-draggable-dragging": "opac"
},
cursor: "grab",
grid: [grid_size, grid_size],
start: function(e, ui) {
$(this).find(".text").hide();
follow = false;
startPos = ui.position;
},
stop: function() {
follow = true;
endPos = svg.position();
offset.X = endPos.left;
offset.Y = endPos.top;
}
});
});
通过测试,我对draggable做了一点调整,div.img
wrapper是draggable,里面的svg
是handle。我不确定这里是否有好处,但我不想让它被忽视。