152 lines
6.2 KiB
HTML
152 lines
6.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<title>选中Canvas中的直线</title>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<canvas id="myCanvas">Your browser does not support HTML5 Canvas. </canvas>
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var myCanvas = document.getElementById("myCanvas");
|
|||
|
|
myCanvas.style.cssText = "position:absolute;left:0;top:0; border: 1px solid #ccc;"; // 画布样式
|
|||
|
|
myCanvas.width = 800; // 画布的宽度
|
|||
|
|
myCanvas.height = 800; // 画布的高度
|
|||
|
|
var ctx = myCanvas.getContext('2d');
|
|||
|
|
|
|||
|
|
var a = 300, b = 300; // 原点
|
|||
|
|
var lines = [
|
|||
|
|
{ p1: { x: a, y: b }, p2: { x: a + 200, y: b }, flag: 0, }, // 原点右移200px;
|
|||
|
|
{ p1: { x: a, y: b }, p2: { x: a, y: b - 200 }, flag: 0 }, // 原点上移200px;
|
|||
|
|
{ p1: { x: a, y: b }, p2: { x: a - 200, y: b }, flag: 0 }, // 原点左移200px;
|
|||
|
|
{ p1: { x: a, y: b }, p2: { x: a, y: b + 200 }, flag: 0 }, // 原点下移200px;
|
|||
|
|
{ p1: { x: a, y: b }, p2: { x: a + 100, y: b - 80 }, flag: 0 }, // 第1象限
|
|||
|
|
{ p1: { x: a, y: b }, p2: { x: a - 100, y: b - 100 }, flag: 0 }, // 第2象限
|
|||
|
|
{ p1: { x: a, y: b }, p2: { x: a - 100, y: b + 100 }, flag: 0 }, // 第3象限
|
|||
|
|
{ p1: { x: a, y: b }, p2: { x: a + 100, y: b + 80 }, flag: 0 }, // 第4象限
|
|||
|
|
{ p1: { x: 100, y: 580 }, p2: { x: 200, y: 550 }, flag: 0 },
|
|||
|
|
{ p1: { x: 200, y: 580 }, p2: { x: 300, y: 600 }, flag: 0 },
|
|||
|
|
{ p1: { x: 80, y: 520 }, p2: { x: 10, y: 450 }, flag: 0 },
|
|||
|
|
{ p1: { x: 10, y: 490 }, p2: { x: 60, y: 480 }, flag: 0 },
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
// 画线
|
|||
|
|
drawAllLines();
|
|||
|
|
|
|||
|
|
// Click 事件
|
|||
|
|
myCanvas.onclick = function (e) {
|
|||
|
|
// 鼠标点击的坐标
|
|||
|
|
var px = e.clientX,
|
|||
|
|
py = e.clientY;
|
|||
|
|
|
|||
|
|
// 逐条线确定是否有点中
|
|||
|
|
var offset = 20; // 可接受（偏移）范围
|
|||
|
|
for (var i = 0; i < lines.length; i++) {
|
|||
|
|
var p1 = lines[i].p1; // 直线起点
|
|||
|
|
var p2 = lines[i].p2; // 直线终点
|
|||
|
|
var flag = 0; // 1 - 点中
|
|||
|
|
var minX = Math.min(p1.x, p2.x); // 较小的X轴坐标值
|
|||
|
|
var maxX = Math.max(p1.x, p2.x); // 较大的X轴坐标值
|
|||
|
|
var minY = Math.min(p1.y, p2.y); // 较小的Y轴坐标值
|
|||
|
|
var maxY = Math.max(p1.y, p2.y); // 较大的Y轴坐标值
|
|||
|
|
|
|||
|
|
if (p1.y === p2.y) {
|
|||
|
|
// 水平线
|
|||
|
|
if ((px >= minX && px <= maxX) && (py >= minY - offset && py <= maxY + offset)) {
|
|||
|
|
flag = 1;
|
|||
|
|
lines[i].crossPoint = { x: px, y: p1.y }; // 直线上交叉点
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
else if (p1.x === p2.x) {
|
|||
|
|
// 垂直线
|
|||
|
|
if ((py >= minY && py <= maxY) && (px >= minX - offset && px <= maxX + offset)) {
|
|||
|
|
flag = 1;
|
|||
|
|
lines[i].crossPoint = { x: p1.x, y: py }; // 直线上交叉点
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
// 斜线 (先判断点是否进入可接受大范围(矩形)，然后再根据直线上的交叉点进行小范围比较)
|
|||
|
|
if ((px >= minX && px <= maxX) && (py >= minY - offset && py <= maxY + offset)) {
|
|||
|
|
//求Y轴坐标
|
|||
|
|
//方法1：根据tanθ= y/x = y1/x1, 即y = (y1/x1)*x (该方法有局限性，垂直线(p2.x - p1.x)=0，不能用)
|
|||
|
|
//var y = ((p2.y - p1.y) / (p2.x - p1.x)) * (px - p1.x);
|
|||
|
|
|
|||
|
|
//方法2：先求弧度hudu，根据cosθ=x/r, r=x/cosθ,求得r，再根据sinθ=y/r, y=sinθ*r, 求得y
|
|||
|
|
var hudu = Math.atan2(p2.y - p1.y, p2.x - p1.x); // 直线的弧度(倾斜度)
|
|||
|
|
// 用三角函数计出直线上的交叉点
|
|||
|
|
var r = (px - p1.x) // Math.cos(hudu); // 直角三角形的斜边（或理解成圆的半径）
|
|||
|
|
var y = Math.sin(hudu) * r; // Y轴坐标
|
|||
|
|
|
|||
|
|
var p = { x: px, y: p1.y + y }; // 直线上的交叉点
|
|||
|
|
if ((Math.abs(px - p.x) <= offset) && (Math.abs(py - p.y) <= offset)) {
|
|||
|
|
flag = 1; // 1 - 点中
|
|||
|
|
}
|
|||
|
|
lines[i].crossPoint = p; // 直线上的交叉点
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (flag === 1) {
|
|||
|
|
lines[i].flag = ((lines[i].flag + 1) % 2); // 0、1切换
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 重画线
|
|||
|
|
drawAllLines();
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 画所有线函数
|
|||
|
|
function drawAllLines() {
|
|||
|
|
// 清空画布
|
|||
|
|
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
|
|||
|
|
|
|||
|
|
// 画出逐条线
|
|||
|
|
for (var i = 0; i < lines.length; i++) {
|
|||
|
|
var color = lines[i].flag === 1 ? "orange" : "blue";
|
|||
|
|
|
|||
|
|
drawLine(ctx, lines[i].p1, lines[i].p2, color);
|
|||
|
|
|
|||
|
|
// 画交叉点
|
|||
|
|
if (lines[i].crossPoint) {
|
|||
|
|
drawPoint(lines[i].crossPoint.x, lines[i].crossPoint.y);
|
|||
|
|
}
|
|||
|
|
lines[i].crossPoint = null;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 画单条线函数
|
|||
|
|
function drawLine(ctx, p1, p2, color) {
|
|||
|
|
color = color || 'blue';
|
|||
|
|
ctx.strokeStyle = color;
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.moveTo(p1.x, p1.y);
|
|||
|
|
ctx.lineTo(p2.x, p2.y);
|
|||
|
|
|
|||
|
|
ctx.shadowOffsetX = 10;
|
|||
|
|
ctx.shadowOffsetY = 10;
|
|||
|
|
ctx.shadowBlur = 5;
|
|||
|
|
ctx.shadowColor = 'rgba(0,0,0,0.5)';
|
|||
|
|
|
|||
|
|
ctx.stroke();
|
|||
|
|
ctx.closePath();
|
|||
|
|
|
|||
|
|
// 计算弧度
|
|||
|
|
var hudu = Math.atan2(p2.y - p1.y, p2.x - p1.x);
|
|||
|
|
var msg = "x:" + p2.x + " y:" + p2.y + " 弧度：" + hudu + " (rad)";
|
|||
|
|
// 线长
|
|||
|
|
var l1 = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
|
|||
|
|
msg = msg + " 线长: " + l1;
|
|||
|
|
|
|||
|
|
ctx.fillText(msg, p2.x, p2.y);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 画圆点
|
|||
|
|
function drawPoint(x, y, color) {
|
|||
|
|
color = color || 'red';
|
|||
|
|
ctx.strokeStyle = color;
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.arc(x, y, 2, 0, 2 * Math.PI);
|
|||
|
|
ctx.stroke();
|
|||
|
|
ctx.closePath();
|
|||
|
|
}
|
|||
|
|
</script>
|