Как изменить цвет заливки графики в create js

Я использую это для изменения цвета заливки при создании js, это не работает

var shape_rect = new createjs.Shape();
shape_rect.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25);
shap_rect3.addEventListener('mouseover', function (evt) {
    shap_rect3.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25);
    stage.update();
});

person asb14690    schedule 07.05.2014    source источник


Ответы (1)


Здесь всего пара вещей:

Во-первых, я заметил, что eventListener связан с shap_rect3, но это не было определено (по крайней мере, не в вашем примере). Цвет при наведении курсора также совпадает с заявленным цветом, поэтому вы не увидите никаких изменений.

Это должно работать для вас, предполагая, что shap_rect3 был опечаткой.

loadGame = function() {
    var canvas = document.getElementById('canvas');
    var stage = new createjs.Stage(canvas);

    stage.enableMouseOver(); //Enable MouseOver events

    var shape_rect = new createjs.Shape(); //Create your shape variable
    shape_rect.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25); //Draw initial rectangle

    shape_rect.on('mouseover', function(evt) { //Change colour on mouseOver
        shape_rect.graphics.beginFill("#FF5400").drawRect(61, 253, 398, 25);
        stage.update(evt);
    });

    //Add this if you want to simulate a hover state and return the rectangle back to it's original colour
    shape_rect.on('mouseout', function(evt) { //.on gives the same result as .addEventListener (at least from a visual perspective, I'm not sure about resource usage)
        shape_rect.graphics.beginFill("#FFD64B").drawRect(61, 253, 398, 25);
        stage.update(evt);
    });

    stage.addChild(shape_rect);
    stage.update();
}

Я новичок в createJS и EaselJS, но это один из способов добиться этого. Затем просто запустите функцию loadGame onLoad:

<body onLoad="loadGame()">
    <canvas id="canvas" width="640" height="640"></canvas>
</body>
person Kieran McClung    schedule 16.05.2014