如何在画布上创建悬停按钮?

时间:2014-12-22 14:16:43

标签: javascript canvas createjs

我正在使用工具容器来实现不同的功能。我想知道的是当活动和不活动时如何为我的橡皮擦按钮创建一个胡佛。

如果有帮助的话,这里有一些代码。

//loader
this.manifest = [
            {src:'images/brush.png',    id:'brush',    link: 'tool'},   
            {src:'images/eraser.png',   id:'eraser',   link: 'tool'},
            {src:'images/clear.png',    id:'clear',    link: 'tool'}
        ];

//eraser tool - Here is setting the position of button.
        var eraser = new createjs.Bitmap(app.loader.getResult('eraser'));
        eraser.name = 'eraser';
        eraser.x = brush.x + 90;
        eraser.y = brush.y;
        eraser.addEventListener('click', this.eraserHandler); 
        this.toolsContainer.addChild(eraser);


// eraser handler function
eraserHandler: function(){
        console.log("erase");
        app.erase = 1 - app.erase;
    },

1 个答案:

答案 0 :(得分:0)

不是100%确定你想要什么,但是如果你想改变你的橡皮擦按钮的显示方式,那么你可以在你的功能eraserHandler中处理它:

eraserHandler: function(){
    console.log("erase");
    //replacing the image with an active image
    eraser.image=app.loader.getResult('eraserActive');
    app.erase = 1 - app.erase;
},

我只是替换了图片属性,但你可以做任何其他事情,比如添加阴影,添加蒙版或过滤器,然后不要忘记更新你的画布...... :)