Javascript-форум (https://javascript.ru/forum/)
-   Оффтопик (https://javascript.ru/forum/offtopic/)
-   -   Получить все точки отрезка прямой? (https://javascript.ru/forum/offtopic/52479-poluchit-vse-tochki-otrezka-pryamojj.html)

Gozar 21.12.2014 19:16

Цитата:

Сообщение от рони
Gozar,
28 строка зачем?

Не догоняю, можешь функцию правильно написать? Я вроде без изменений обернул в функцию. Если косяк, объясни, голова уже плохо варит к вечеру.

рони 21.12.2014 19:20

Gozar,
ты уже сам убрал косяк -- аргументы перезаписывались в строке 28

Gozar 21.12.2014 19:23

рони,
Ты видел результат? Почему он такой? Вначале не линия, а сетка.

рони 21.12.2014 19:32

Gozar,
точность расчётов

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<canvas id="canvas" width="1000" height="1000" style="border: 1px solid #000"></canvas>

<script>

    function setPixel (x, y) {

        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.arc(x, y, 1, 0, Math.PI*2, true);
        ctx.fill();
        ctx.closePath();
    }
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,1)';

function ronyLine (x1, y1, x2, y2) {

    var time = Math.max( Math.abs(x1 - x2), Math.abs(y1 - y2)),  //оптимальная точность
        a, b, delta, i;
        time = 1000// точность для маньяков
    for (i=0; i<time; i++)  {
      delta = i/time;
      a =  delta*(x2 - x1) + x1;
      b =  delta*(y2 - y1) + y1;
      setPixel(a,b)
      //setPixel(Math.round(a),Math.round(b)) //по желанию
    }
}
    for(var i=0;i<1000;i+=10) {
        ronyLine(10, 10, i, 200);
    }

</script>
</body>

</html>

Gozar 21.12.2014 19:39

рони,
Это все прикольно, но в тесте пикселы закрашены не все, а значит ф-ия не подходит, с учетом того, что она еще и немного медленнее других.

рони 21.12.2014 19:52

Gozar,
померяй этот вариант )))
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
</head>

<body>
<canvas id="canvas" width="1000" height="520" style="border: 1px solid #000"></canvas>
<script>
function setPixel(x, y) {

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.arc(x, y, 1, 0, Math.PI * 2, true);
    ctx.fill();
    ctx.closePath();
}
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,1)';

function ronyLine(x1, y1, x2, y2) {
    var x = Math.abs(x1 - x2),y = Math.abs(y1 - y2) ;
    var time = Math.sqrt(x*x + y*y)|0, //    больше точек, чем это число на линии нет
        a, b, delta, i;
    var xx = (x2 - x1) + x1, yy = (y2 - y1) + y1 ; //типа кеш

    for (i = 0; i < time; i++) {
        delta = i / time;
        a = delta * xx;
        b = delta * yy;
        setPixel(a, b)

    }
}
for (var i = 0; i < 1000; i += 10) {
    ronyLine(10, 10, i, 500);
}
</script>
</body>

</html>

JsLoveR 21.12.2014 20:03

Иногда можно заюзать линейную "кривую" безье.
function bezierLineTo(x1, y1, x2, y2) {
	var step = 0.0001; //для большей точности можно находить дистанцию между точками, тогда step = 1 / distance
		
	for (var t = 0; t < 1; t += step) {
		var x = (1 - t) * x1 + t * x2;
		var y = (1 - t) * y1 + t * y2;
			
		setPixel(x, y);
	}
}

Gozar 21.12.2014 20:26

Цитата:

Сообщение от JsLoveR (Сообщение 347515)
Иногда можно заюзать линейную "кривую" безье.

В копилку, будет следующий этап.

Кстати кто-нибудь знает какой-нибудь очень быстрый рандом? вот этот:
Math.floor(Math.random() * (max - min + 1)) + min;

очень медленный.

Подойдет от 1 до 360.

рони 21.12.2014 20:32

Gozar,
а если один раз сформировать массив рандомный и пользоваться

nerv_ 21.12.2014 20:52

Цитата:

Сообщение от Gozar
Получить все точки отрезка прямой?
Известно x1, y1, x2, y2

Отвечу, как понял. Все точки прямой - длинна прямой.

1. По точкам строишь вектор. Координаты вектора: x = x2-x1, y = y2-y1
2. Находишь длину (модуль) вектора: sqrt(x^2 + y^2)

Если требуется, переводишь декартовы координаты в полярные (или наоборот).


Часовой пояс GMT +3, время: 08:18.