Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Canvas обработчик на нарисованный сектор (https://javascript.ru/forum/dom-window/38057-canvas-obrabotchik-na-narisovannyjj-sektor.html)

devarts 17.05.2013 02:20

Canvas обработчик на нарисованный сектор
 
Как в конвасе можно выделить сектор и к нему добавить обработчик событий, те чтобы при наведении сектор уменьшался.
Я сделал так, но там обработчик на теге канвасе, а надо на секторе
window.onload = main;
function main()
{
    function Circle(ctx, w, h, datalist, radius)
    {

        var centerx = w / 2;
        var centery = h / 2;
        var total = 0;
        for(x=0; x < datalist.length; x++) { total += datalist[x]; }
        var lastend=0;
        var offset = Math.PI / 2;
        for(x=0; x < datalist.length; x++)
        {
            var thispart = datalist[x];
            ctx.beginPath();
            ctx.fillStyle = colist[x];
            ctx.moveTo(centerx,centery);
            var arcsector = Math.PI * (2 * thispart / total);
            ctx.arc(centerx, centery, radius[x], lastend - offset, lastend + arcsector - offset, false);
            ctx.lineTo(centerx, centery);
            ctx.fill();
            ctx.closePath();
            lastend += arcsector;
        }
    }

    var h=500;
   var radius = new Array(h / 2 ,h / 2 ,h / 2 );
    var datalist= new Array(120,120,120);
    var colist = new Array('red', 'green', 'yellow');
    var canvas = document.getElementById("myCanvas1");
    var ctx = canvas.getContext('2d');
    Circle(ctx, canvas.width, canvas.height, datalist, radius);
    var id;


    function draw(event) {
        event = event || window.event;


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

       radius[0]-=5;
       id=setTimeout(draw, 50);
       if(radius[0]<40)
        {
            clearTimeout(id);
        }

        x= (event.layerX == undefined ? event.offsetX : event.layerX);
        y= (event.layerY == undefined ? event.offsetY : event.layerY);


        Circle(ctx, canvas.width, canvas.height, datalist, radius);


    }

    canvas.addEventListener('mouseover', draw, false);

}

mta88 17.05.2013 07:00

это невозможно
 
у canvas нет подэлементов на которые можно вешать обработчики событий, только на canvas

у canvas-context нет api для обработки событий, только для рисования
(по крайней мере у '2d'-context, о 'webgl' ничего не знаю)

можете проверить сами api здесь или здесь

так-что только кастомные решения, свои или чужие

devarts 17.05.2013 16:30

mta88, можете тогда что-нибудь посоветовать?
была идея отрисовать три слоя подряд канвасом, но пока не исчезнет первый слой (первый сектор), то следующие не обрабатываются.

mta88 17.05.2013 17:52

а вот кроме www.google.ru/search?q=canvas+framework ничего посоветовать не смогу

область сейчас быстро развивается а я за ней не слежу


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