EXTEND LINE ПОСЛЕ ИНТЕРЕСОВАНИЯ

У меня есть две строки. Мне нужно расширить линии после пересечения, используя математическую формулу pls, помогите мне.EXTEND LINE ПОСЛЕ ИНТЕРЕСОВАНИЯ

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="myCanvas" width="200" height="100" style="border:0px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 
<script> 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.moveTo(0,0); 
ctx.lineTo(200,100); 
ctx.moveTo(0,100); 
ctx.lineTo(200,100); 
ctx.stroke(); 
</script> 
</body> 
</html>

enter image description here

источник

2014-01-31 Arunkumar

косяк понимает ваш вопрос. – user3064914

В чем вопрос? –

см. Эту скрипку http://jsfiddle.net/K549H/ – Arunkumar

Предположим, у вас есть треугольник, определяемый тремя точками:

a = {x:10, y:20} 
b = {x:60, y:70} 
c = {x:99, y:30}

Это как сделать это:

ctx.beginPath(); 
ctx.moveTo(a.x, a.y); 
ctx.lineTo(b.x, b.y); 
ctx.lineTo(c.x, c.y); 
ctx.stroke() 
ctx.closePath();

Теперь давайте расширим обе стороны. Первая линия определяется по формуле:

slope1 = (a.y - b.y)/(a.x - b.x) 
intercept1 = b.y - (slope1 * b.x)

Аналогично, вторая:

slope2 = (c.y - b.y)/(c.x - b.x) 
intercept2 = b.y - (slope2 * b.x)

Выберите конечные точки на другой стороне точки пересечения:

if(!Number.isFinite(slope1)) end1 = {x:b.x, y:b.y*2-a.y} 
else if(!slope1)    end1 = {x:b.x*2-a.x, y:b.y} 
else       end1 = {x:b.x*2-a.x, y:(b.x*2-a.x)*slope1+intercept1 } 

if(!Number.isFinite(slope2)) end2 = {x:b.x, y:b.y*2-c.y} 
else if(!slope2)    end2 = {x:b.x*2-c.x, y:b.y} 
else       end2 = {x:b.x*2-c.x, y:(b.x*2-c.x)*slope2+intercept2 }

и рисовать расширения:

ctx.beginPath(); 
ctx.setStrokeColor('red'); 
ctx.moveTo(b.x, b.y); 
ctx.lineTo(end1.x, end1.y); 
ctx.moveTo(b.x, b.y); 
ctx.lineTo(end1.x, end1.y); 
ctx.stroke(); 
ctx.closePath();

http://jsfiddle.net/K549H/10/

источник

2014-01-31 13:01:22 georg

k. в этом случае http://jsfiddle.net/K549H/3/. Мне нужен общий способ, чтобы он образовывал любое место под любым углом. – Arunkumar

PLS помочь мне .... – Arunkumar

@ v.ArunKumar: обновлено – georg

Ваш холст должен быть больше.

<canvas id="myCanvas" width="400" height="400" style="border:0px solid #d3d3d3;">

И линия длиннее =>

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.moveTo(0,0); 
ctx.lineTo(400,200); 
ctx.moveTo(0,100); 
ctx.lineTo(400,100); 
ctx.stroke();

Вот огурчик: http://jsfiddle.net/Vandeplas/XHBe5/

источник

2014-01-31 13:04:45 VDP

k.в этом случае jsfiddle.net/K549H/3. Мне нужен общий способ, чтобы он образовывал любое место под любым углом. – Arunkumar

EXTEND LINE ПОСЛЕ ИНТЕРЕСОВАНИЯ

ответ

Смежные вопросы