0

我正在创建一个 mootools 类并使用Mootools 画布库基本上只是创建（目前）一个小方块，只要在另一个画布项目区域上有点击事件。想象一下 Photoshop 钢笔工具和节点。

var Pentool = new Class({
    Implements: [Events, Options],
    initialize: function(canvasel) {

        CANVAS.init({
                canvasElement : canvasel,
                enableMouse : true
        });

        var _self = this;

        //add a layer
        var layer = CANVAS.layers.add( new Layer({
                id : 'myLayer'
        }));

        var area = new CanvasItem({
            id: 'area_',
            w: 360,
            h: 500,
            interactive: true,

            events: {
                onDraw: function(ctx) {
                    ctx.fillStyle = 'rgba(255,255,255,0.3)';
                    ctx.fillRect(0, 0, this.w, this.h);
                    this.setDims(0, 0, this.w, this.h)
                },
                onClick: function(x, y) {
                    _self.addNode(layer, x, y);
                }
            }

        })

        layer.add(area);

        CANVAS.draw();


    },
    addNode: function(layer, x, y) {
        var node = new CanvasItem({
            id: 'node_',
            x: x,
            y: y,
            fillStyle : 'rgba(255,0,0,1)',
            events: {
                onDraw: function(ctx) {
                    ctx.fillStyle = this.fillStyle;
                    ctx.fillRect(this.x, this.y, 12, 12);
                }
            }

        });

        layer.add(node);        
        CANVAS.draw();

    }
})

现在我已经尝试了一切来阻止这种情况，但是每当我点击不止一次时，不透明度就会上升（请参阅不透明度填充）。我该如何阻止这种情况发生？我认为，我需要正确“清除”画布。

4

1 回答 1

0

我自己对画布还很陌生，但发现这ctx.beginPath()会给你一个“新的开始”，但你还需要再做moveTo()一次，并再次绘制所有多边形和线条。

ctx.fillStyle="rgba(255,255,255,0.5)";
ctx.fillRect(10,10,50,50);
ctx.beginPath();
ctx.fillRect(70,10,50,50);

这将绘制出同样不透明的盒子。

于 2012-04-30T13:23:14.933 回答