Форум

megaupload · #11 (**permalink**) 29.01.2013, 00:58

вообще, если ты рисуешь на холсте то ты должен понимать что это уже ОТКОМПИЛЕННЫй враиант, тое тсь заверщенный, это просто набор пикселей, и еслиэти пиксели имеют логический смысл, то ест делятся на круги или квадраты, то ты должен где -то хранить модели эттих кругов и квадратов и их положения.. с точки зрения канваса вот ты отрисовал что то, и все, оно ни где не хранится... это просто набор пикселей. так что придумай свою систему как хранить модель элементов, придумай свою систему событий и.т.п. используй MVC черт возьми

Moonlight · #12 (**permalink**) 29.01.2013, 10:53

Это все мне понятно. Просто было интересно как это обычно делается. Теперь мне ясно, что удобного решения "из коробки" не будет).

Gozar · #13 (**permalink**) 29.01.2013, 11:53

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

удобного решения "из коробки" не будет

Ты преувеличиваешь. Создать небольшую рабочую модель объектов и установки на них обработчиков вполне посильная задача средней руки программисту на неделю - максимум.

Мне тоже когда-то не понравилась extJS в силу лицензии и тяжести, я создал свою, только то, что мне нужно.

А удобные решения из коробки скучны и неинтересны. Хотя иногда и лень писать свое.

Moonlight · #14 (**permalink**) 29.01.2013, 17:26

Да так то у меня проблем не возникает с наведением на множество элементов. Но мне не нравится мой способ. Он заключается в том, чтобы располагать на холсте canvas тэг map и в нём теги area с координатами областей canvas. И вот тогда каждая область это не просто набор пикселей, а элемент html. Ну и тут уже всё проще некуда. Gozar я это к тому, что рабочая модель у меня есть, но мне она не нравится. Дзен-трансгуманист а как примерно это уравнение будет выглядеть для произвольного количества углов?

Дзен-трансгуманист · #15 (**permalink**) 29.01.2013, 19:40

Moonlight,
Простым будет только метод для выпуклых многоугольников.

<body style="padding: 0px; margin: 0px;">
<canvas id="canvas" width="300" height="300"></canvas>
<script>

var canvas = document.getElementById( 'canvas' );
var ctx = canvas.getContext( '2d' );

var poly = [
  { x:  20, y:  50 },
  { x:  90, y:  10 },
  { x: 220, y:  60 },
  { x: 260, y: 180 },
  { x: 180, y: 280 },
  { x:  80, y: 220 }
];

function isPointInConvexPoly ( x, y, poly ) {

  var i = 0, pt1, pt2 = poly[ poly.length - 1 ];
  while ((
      pt1 = pt2,
      pt2 = poly[ i ],
      ( y - pt1.y ) * ( pt2.x - pt1.x ) > ( x - pt1.x ) * ( pt2.y - pt1.y )
    ) && ++i < poly.length ) {}
  return i == poly.length;
}

function renderTest ( mouseX, mouseY ) {

  ctx.clearRect( 0, 0, canvas.width, canvas.height );

  ctx.lineWidth = 2;
  ctx.fillStyle = isPointInConvexPoly( mouseX, mouseY, poly ) ? 'red' : 'blue';

  ctx.beginPath();
  ctx.moveTo( poly[0].x, poly[0].y );
  for ( var i = 1; i < poly.length; i++ ) { ctx.lineTo( poly[i].x, poly[i].y ); }
  ctx.fill();

  ctx.fillStyle = 'black';
  ctx.beginPath();
  ctx.moveTo( mouseX + 3, mouseY );
  ctx.arc( mouseX, mouseY, 3, 0, Math.PI*2, false );
  ctx.fill();
}

canvas.addEventListener( 'mousemove', function ( event ) {
  renderTest( event.pageX, event.pageY );
}, false );

renderTest( -100, -100 );

</script>
</body>

А если брать вообще произвольные фигуры, то там все на порядок-два сложнее, я даже не собираюсь возиться с этим...
Смотрите код готовых библиотек, наверняка в том же libcanvas'е оно уже реализовано.

9xakep · #16 (**permalink**) 29.01.2013, 19:51

Дзен-трансгуманист,
Как это называется, что за магия?

Дзен-трансгуманист · #17 (**permalink**) 29.01.2013, 20:44

9xakep,
~~Для начала нужно надеть плащ и волшебную шляпу.~~

Ноги растут из простого неравенства:

y2 * x1 > x2 * y1

Если неравенство соблюдается, значит точка (x2, y2) находится справа от прямой ((0, 0) - (x1, y1)). (это относительно экранной системы координат, так как Y у нас направлен вниз, а не вверх)

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

Форум

Справочник

Discord чат

Курсы javascript