将基于斜率的直线延伸到画布/绘图区域的末端 [英] Extend Line based on slope to the end of canvas/drawing area
问题描述
我试图将一条线（从点（X，Y））延伸到绘图区域的末端。
到目前为止，我发现了一些关于如何计算扩展终点的指示。
然而，我并没有真正做到它在一个方向上工作只要你达到中间点就会中断。
请参阅附件代码示例（我正在使用的真实产品是快速的，但由于它不是编程语言相关的问题，我把它移植到javascript）在右侧它似乎工作，黑线是用户选择的一个红色的一个是扩展到
var canvas = document.getElementById（myCanvas）; var endPoint = {x：200，y：200}; function draw（）{//仅在最终产品用户中演示也可以选择起点startPoint = {x：150，y：150 } screenMax = {x：canvas.height，y：canvas.width} var ctx = canvas.getContext（2d）; ctx.clearRect（0，0，canvas.width，canvas.height）; ctx.beginPath（）; ctx.moveTo（startPoint.x，startPoint.y）; ctx.lineTo（endPoint.x，endPoint.y）; ctx.strokeStyle =＃000000; ctx.stroke（）; //根据斜率将斜线延伸到画布的末端var slope = 1.0 var extendedPoint = {x：0，y：0} if（endPoint.x！= startPoint.x）{slope =（endPoint.y - startPoint.y） /（endPoint.x - startPoint.x）; extendedPoint = {x：screenMax.x，y：slope *（screenMax.x - endPoint.x）+ endPoint.y}} else {slope = 0 extendedPoint.x = endPoint.x; extendedPoint.y = screenMax.y; } console.log（endPoint）; //绘制扩展ctx.beginPath（）; ctx.moveTo（endPoint.x，endPoint.y）; ctx.lineTo（extendedPoint.x，extendedPoint.y）; ctx.strokeStyle =＃FF0000; //处理鼠标dOwncanvas.onmousedown = function（e）{handleMouseDown（e）;} //处理mousedown事件//设置新的端点函数handleMouseDown（e）{mouseX = parseInt（e.clientX）; mouseY = parseInt（e.clientY）; endPoint = {x：mouseX，y：mouseY} draw（）;}
<！DOCTYPE html>< html>< body> < canvas id =myCanvaswidth =300height =300style =border：1px solid＃d3d3d3;> < / canvas>< / body>< / html>
此函数可能有帮助，将 x1，y1 $ c> x2，y2 并将其扩展到由 left，top，right，bottom 定义的边界，将截取点返回为 {x：？，y：？}
函数toBorder（x1，y1，x2 ，y2，left，top，right，bottom）{
var dx，dy，py，vx，vy;
vx = x2 - x1;
vy = y2 - y1;
dx = vx< 0？左右;
dy = py = vy < 0？ top：bottom;
if（vx === 0）{
dx = x1;
} else if（vy === 0）{
dy = y1;
} else {
dy = y1 +（vy / vx）*（dx - x1）;
if（dy bottom）{
dx = x1 +（vx / vy）*（py - y1）;
dy = py;
return {x：dx，y：dy}
}
I am trying to extend a line (from to points(X,Y)) to the end of the drawing area. so far i found a couple of instructions on how to calculate the extension end point.
however i don't really get it done it works in one direction and breaks as soon as you reach over the middle point.
see attached code sample (the real product i am working on is in swift, but as it is not a programming language related issue, i ported it to javascript)
on the right side it seems to work, black line is the one the user selects, red one is the extension to the edge of canvas, going to the left side produces garbage.
var canvas = document.getElementById("myCanvas");
var endPoint = {
x: 200,
y: 200
};
function draw() {
//Demo only in final product user also can select the startpoint
startPoint = {
x: 150,
y: 150
}
screenMax = {
x: canvas.height,
y: canvas.width
}
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(startPoint.x, startPoint.y);
ctx.lineTo(endPoint.x, endPoint.y);
ctx.strokeStyle = "#000000";
ctx.stroke();
//Extend line to end of canvas according to slope
var slope = 1.0
var extendedPoint = {
x: 0,
y: 0
}
if (endPoint.x != startPoint.x) {
slope = (endPoint.y - startPoint.y) / (endPoint.x - startPoint.x);
extendedPoint = {
x: screenMax.x,
y: slope * (screenMax.x - endPoint.x) + endPoint.y
}
} else {
slope = 0
extendedPoint.x = endPoint.x;
extendedPoint.y = screenMax.y;
}
console.log(endPoint);
//Draw the Extension
ctx.beginPath();
ctx.moveTo(endPoint.x, endPoint.y);
ctx.lineTo(extendedPoint.x, extendedPoint.y);
ctx.strokeStyle = "#FF0000";
ctx.stroke();
}
//initial draw
draw();
//handle Mouse dOwn
canvas.onmousedown = function(e) {
handleMouseDown(e);
}
// handle the mousedown event
//Set new endpoint
function handleMouseDown(e) {
mouseX = parseInt(e.clientX);
mouseY = parseInt(e.clientY);
endPoint = {
x: mouseX,
y: mouseY
}
draw();
}
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>
This function may help, takes the line x1,y1 to x2,y2 and extends it to the border defined by left,top,right,bottom returning the intercept point as {x:?,y:?}
function toBorder(x1, y1, x2, y2, left, top, right, bottom){
var dx, dy, py, vx, vy;
vx = x2 - x1;
vy = y2 - y1;
dx = vx < 0 ? left : right;
dy = py = vy < 0 ? top : bottom;
if(vx === 0){
dx = x1;
}else if(vy === 0){
dy = y1;
}else{
dy = y1 + (vy / vx) * (dx - x1);
if(dy < top || dy > bottom){
dx = x1 + (vx / vy) * (py - y1);
dy = py;
}
}
return {x : dx, y : dy}
}
这篇关于将基于斜率的直线延伸到画布/绘图区域的末端的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
