0

私はmootoolsクラスを作成し、Mootools Canvas Libraryを使用して、基本的に（今のところ）別のキャンバスアイテム領域でクリックイベントがある場所に小さな正方形を作成しています。フォトショップのペンツールとノードを想像してみてください。

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();

    }
})

今、私はこれを止めるためにすべてを試みましたが、不透明度が上がるのを2回以上クリックするたびに（不透明度の塗りつぶしを参照）。これを防ぐにはどうすればよいですか？キャンバスを正しく「クリア」する必要があると思います。

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 に答える