关于“结算”的建议？ canvas

我正在创建一个mootools类，并且使用Mootools Canvas Library基本上只是在另一个画布项目区域中发生点击事件的地方创建（现在）一个小广场。想象一下photoshop笔工具和节点。关于“结算”的建议？ canvas

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

    } 
})

现在我已经试过一切，以阻止这一点，但每当我点击不止一次不透明度上升（请参阅不透明度填充）。我如何阻止这种情况发生？我想，我需要正确“清理”画布。

来源

2012-04-30 beingalex

我是相当新的画布自己，但发现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-30 13:23:14 peirix

关于“结算”的建议？ canvas

回答

相关问题