Форум

Gozar · #11 (**permalink**) 21.12.2014, 18:11

рони,
Вот тебе функция:

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

    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)';

Можешь нарисовать на канвас то, что у тебя получилось?

Я не очень понимаю куда мне подставлять отрицательные значения из твоего кода.

Вот координаты двух линий:
x1 = 10, y1 = 10, x2 = 100, y2 = 100;
x1 = 10, y1 = 100, x2 = 100 y2 = 10;

JsLoveR · #12 (**permalink**) 21.12.2014, 18:42

Сообщение от Gozar

Допенькал как получить точки прямой по Алгоритму Брезенхема до 45* градусов. Если переставить x и y можно даже получить все точки до 90*.

Данный алгоритм подходит для абсолютно любых линий. Вот можно поиграться в песочнице.

function drawLineTo(x1, y1, x2, y2) {
	var deltaX = Math.abs(x2 - x1),
		deltaY = Math.abs(y2 - y1),
		signX = x1 < x2 ? 1 : -1,
		signY = y1 < y2 ? 1 : -1,
		error = deltaX - deltaY;
		
		setPixel(x2, y2);
		
	while (x1 != x2 || y1 != y2) {
			
		setPixel(x1, y1);
			
		var error2 = error * 2;
			
		if (error2 > -deltaY) {
			error -= deltaY;
			x1 += signX;
		}
			
		if (error2 < deltaX) {
			error += deltaX;
			y1 += signY;
		}
	}
}

рони · #13 (**permalink**) 21.12.2014, 18:56

Сообщение от Gozar

Можешь нарисовать на канвас то, что у тебя получилось?

<!DOCTYPE HTML>

<html>

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

<body>
<canvas id="canvas" width="300" height="300" 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)';

x1 = 10, y1 = 10, x2 = 100, y2 = 100;
var time = Math.abs(x1 - x2);
for (var i=0; i<time; i++)  {
  var delta = i/time ;
  var a =  delta*(x2 - x1) + x1;
  var b =  delta*(y2 - y1) + y1;
  setPixel(a,b)
}
x1 = 10, y1 = 100, x2 = 100, y2 = 10;
var time = Math.abs(x1 - x2);
for (var i=0; i<time; i++)  {
  var delta = i/time ;
  var a =  delta*(x2 - x1) + x1;
  var b =  delta*(y2 - y1) + y1;
  setPixel(a,b)
}


</script>
</body>

</html>

Gozar · #14 (**permalink**) 21.12.2014, 19:02

JsLoveR,
Спасибо. Я нашел немного другой, он по скорости чуть чуть быстрее:

function setLine (x1, y1, x2, y2) {
    var x = x1,
        y = y1;
    var dx = Math.abs(x2-x1),
        dy = Math.abs(y2-y1);
    var sx = (x2-x1)>0?1:((x2-x1)==0?0:-1);
    var sy = (y2-y1)>0?1:((y2-y1)==0?0:-1);
    var tx, ty;
    var z, scount, count, dcount;

    if (dx>=dy) {
        tx = sx; ty = 0;
    } else {
        z=dx; dx=dy; dy=z;
        tx=0; ty=sy;
    }

    scount = 2*dy;
    count = scount-dx;
    dcount = count-dx;

    for(;;) {

        dx -= 1;

        if (dx < -1){
            break;
        }

        setPixel(x, y);

        if (count >= 0) {
            x+=sx;
            y+=sy;
            count += dcount;

        } else {
            x+=tx;
            y+=ty;
            count += scount;
        }
    }
}

__он_самый__ · #15 (**permalink**) 21.12.2014, 19:04

Сообщение от Gozar

похоже на здравствуй тормоза!

этот трюк исполоьзуют например чтобы проверить находится ли курсор внутри сложной фигуры или во вне её, рисуют фигуру на невидимой канве WEBGL зеленым цветом, и проверяют какого цвета пиксель в нужной координате, белый или зеленый. и это быстре чем самому яваскриптом вычислять. Можно хоть 30 фигур нарисовать разными цветами и определить на какую наведен курсор)

эт на будущее, по скольку спускаемся на уровень абстракции ниже ближе к железу, то это раз в сто быстрее чем яваскриптом считать

Этим же трюком можно чекать пересекаются ли фигуры в физических яваскрипт движках)

аппаратное ускорение хули

__он_самый__ · #16 (**permalink**) 21.12.2014, 19:07

for(;;)

не пиши так больше, пиши while(true) как все нормальные люди, и даже не while(1), именно while(true), как взрослый образованный человек, не дикарь.

Gozar · #17 (**permalink**) 21.12.2014, 19:08

рони,
Что-то не работает:

<!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.abs(x1 - x2),
        a, b, delta, i;

    for (i=0; i<time; i++)  {
      delta = i/time;
      a =  delta*(x2 - x1) + x1;
      b =  delta*(y2 - y1) + y1;
      setPixel(a,b)
    }
}
    for(var i=0;i<1000;i+=1) {
        ronyLine(10, 10, i, 200);
    }

</script>
</body>

</html>

Упс, работает, но что-то мне подсказывает, что лучше так не делать

Gozar · #18 (**permalink**) 21.12.2014, 19:09

__он_самый__,

Сообщение от __он_самый__

этот трюк исполоьзуют например чтобы проверить находится ли курсор внутри сложной фигуры или во вне её

https://developer.mozilla.org/en-US/....isPointInPath

рони · #19 (**permalink**) 21.12.2014, 19:11

Gozar,
28 строка зачем?

Gozar · #20 (**permalink**) 21.12.2014, 19:14

Сообщение от __он_самый__

for(;;)

не пиши так больше, пиши while(true) как все нормальные люди, и даже не while(1), именно while(true), как взрослый образованный человек, не дикарь.

Можно и так. Просто код был с java списан, было не до украшательств. На скорости это не отразилось. Пусть будет while(true)

Форум

Справочник

Discord чат

Курсы javascript