Изменение слоя в jCanvas

#javascript #jquery #canvas

                    
Рисую, используя jCanvas. Создала текст, который меняет цвет при наведении мыши.
Но я использую setLayer, то есть, получается, создаю новый слой. Поэтому новая надпись
исчезает при наведении мыши. Непонятно только почему на весь слой, а не только на первый
текст.

Мне нужно, чтобы первый текст по-прежнему менял цвет при наведении мыши, но все остальное
оставалось неизменным.

Демо.

$('canvas').drawText({
    fillStyle: 'green',
    strokeWidth: 2,
    x: 150, y: 100,
    fontSize: 48,
    fontFamily: 'Verdana, sans-serif',
    text: 'Hello',
    layer: true,
    mouseover: function(layer) {
        $(this).setLayer(layer, {
            fillStyle:'red',
        })
        .drawLayers();
    },
    mouseout: function(layer) {
        $(this).setLayer(layer, {
            fillStyle:'green'
        })
        .drawLayers();
    },
 });

$('canvas').drawText({
    x: 150, y: 300,
    fillStyle: 'green',
    strokeWidth: 2,
    fontSize: 34,
    text: 'Hello'
})

    

Ответы

Ответ 1

Проблема заключается в том, что у второго текста не установлено свойство layer: true.
Как результат - его нет в списке слоёв, и при вызове .drawLayers(); он перестаёт быть
видимым.

Исправленный код:

var $canvas = $('canvas');
$canvas.drawText({
    fillStyle: 'green',
    strokeWidth: 2,
    x: 150, y: 100,
    fontSize: 48,
    fontFamily: 'Verdana, sans-serif',
    text: 'Hello',
    layer: true,
    mouseover: function(layer) {
        $(this).setLayer(layer, {
            fillStyle: 'red'
        }).drawLayers();
    },
    mouseout: function(layer) {
        $(this).setLayer(layer, {
            fillStyle: 'green'
        }).drawLayers();
    }
});
$canvas.drawText({
    x: 150, y: 300,
    fillStyle: 'green',
    strokeWidth: 2,
    fontSize: 34,
    text: 'Hello',
    layer: true
});


Полный пример в jCanvas Sandbox.