[英]Drawing straight lines in JavaScript
I'm just trying to draw a line with JavaScript. 我只是想用JavaScript画一条线。
I would like it to be like this: http://deepliquid.com/projects/blog/arrows2.html 我希望它像这样: http : //deepliquid.com/projects/blog/arrows2.html
My version: http://jsfiddle.net/shawn31313/qsWML/5/show 我的版本: http : //jsfiddle.net/shawn31313/qsWML/5/show
Doesn't work too well and I don't know how to get it too work. 效果不太好,我也不知道如何使其正常工作。 It must be an issue in my JavaScript. 这肯定是我的JavaScript中的问题。
This my code: 这是我的代码:
$(document).ready(function() {
var dragStatus = 2,
getPos, giveRandomID;
$(document).mousedown(function(event) {
dragStatus = 0;
getPos = {
top: event.clientY,
left: event.clientX
};
giveRandomID = Math.floor(Math.random() * 99999);
});
$(document).mousemove(function() {
var line = $('#line' + giveRandomID);
if (dragStatus == 0) {
$('body').append("<div id='line" + giveRandomID + "' style='position:absolute;top:" + getPos.top + "px;left:" + getPos.left + "px;background:black;width:2px;height:5px'></div>");
dragStatus = 1;
}
if (dragStatus == 1) {
if (event.clientX > getPos.left) {
line.css({
left: getPos.left,
width: event.clientX - getPos.left
});
} else {
line.css({
left: event.clientX,
width: getPos.left - event.clientX
});
}
if (event.clientY > getPos.top) {
line.css({
top: getPos.top - Math.abs((event.clientY - getPos.top) * 2),
'-webkit-transform': 'rotate(' + (event.clientY - getPos.top) + 'deg)'
});
} else {
line.css({
top: getPos.top + Math.abs((getPos.top - event.clientY) * 2),
'-webkit-transform': 'rotate(' + (getPos.top - event.clientY) + 'deg)'
});
}
//for DEG "-" Top-Math.abs(DEG*2) for Deg "+" Top+(DEG*2)
}
});
$(document).mouseup(function() {
dragStatus = 2;
});
});
Thanks for any help fixing this. 感谢您协助解决此问题。 Mainly an issue with the math, just don't know how I can fix this. 主要是数学问题,只是不知道该如何解决。
使用Canvas标签,以下是MDN的示例https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.