вообще, если ты рисуешь на холсте то ты должен понимать что это уже ОТКОМПИЛЕННЫй враиант, тое тсь заверщенный, это просто набор пикселей, и еслиэти пиксели имеют логический смысл, то ест делятся на круги или квадраты, то ты должен где -то хранить модели эттих кругов и квадратов и их положения.. с точки зрения канваса вот ты отрисовал что то, и все, оно ни где не хранится... это просто набор пикселей. так что придумай свою систему как хранить модель элементов, придумай свою систему событий и.т.п. используй MVC черт возьми
|
Это все мне понятно. Просто было интересно как это обычно делается. Теперь мне ясно, что удобного решения "из коробки" не будет).
|
Цитата:
Мне тоже когда-то не понравилась extJS в силу лицензии и тяжести, я создал свою, только то, что мне нужно. А удобные решения из коробки скучны и неинтересны. Хотя иногда и лень писать свое. |
Да так то у меня проблем не возникает с наведением на множество элементов. Но мне не нравится мой способ. Он заключается в том, чтобы располагать на холсте canvas тэг map и в нём теги area с координатами областей canvas. И вот тогда каждая область это не просто набор пикселей, а элемент html. Ну и тут уже всё проще некуда. Gozar я это к тому, что рабочая модель у меня есть, но мне она не нравится. Дзен-трансгуманист а как примерно это уравнение будет выглядеть для произвольного количества углов?
|
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,
Ноги растут из простого неравенства: y2 * x1 > x2 * y1 Если неравенство соблюдается, значит точка (x2, y2) находится справа от прямой ((0, 0) - (x1, y1)). (это относительно экранной системы координат, так как Y у нас направлен вниз, а не вверх) В функции последовательно для каждой из сторон производится трансляция к началу координат относительно левой ее точки, и цикл прерывается в случае несоблюдения неравенства. Если цикл пройден до конца, значит неравенство выполнено для всех сторон многоугольника и наша точка находится внутри. |
| Часовой пояс GMT +3, время: 07:40. |