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

How to create a hover button on canvas?

本文关键字：创建 悬停 按钮      更新时间：2023-09-26

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

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

//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;
    },

>不是 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;
},

我只是替换了 image 属性，但您可以执行其他任何操作，例如添加阴影、添加蒙版或滤镜，然后不要忘记更新您的画布...... :)

相关文章：