关于LGraphics类的add方法问题

ningbnii

lufy您好：
我想做一个画板的demo，http://lufydemo.wxbuluo.com/#/drawingpad
function main(event) {
  initBackgroundLayer();
  drawing = new LShape();

  backgroundLayer.addChild(drawing);
  drawing.graphics.drawRect(0,'#fff',[0,0,w,h]);
  drawing.addEventListener(LMouseEvent.MOUSE_DOWN,onMouseDown);
  drawing.addEventListener(LMouseEvent.MOUSE_MOVE,onMouseMove);
  drawing.addEventListener(LMouseEvent.MOUSE_UP,onMouseUp);
}

function onMouseDown(e) {
  isDrawing = true;

  drawing.graphics.add(function(ctx){
    console.log('mousedown')
    ctx.lineWidth = 5;
    ctx.lineJoin = ctx.lineCap = 'round';
    ctx.shadowBlur = 10;
    ctx.shadowColor = 'rgb(0,0,0)';
    points.push({x:e.selfX,y:e.selfY});
  });
}
我给shape添加了一个MOUSE_DOWN事件，在onMouseDown方法中调用了graphics.add去划线，发现点一下屏幕，console.log会循环触发，这样导致画出的不是设想的效果，请问是什么原因导致的呢
https://github.com/ningbnii/ionic_lufy_demo
这个是画板的代码
https://github.com/ningbnii/ionic_lufy_demo/blob/master/www/controllers/drawingpad.js

ningbnii

lufy 发表于 2020-1-8 13:20
graphics.add所添加的线，是会每帧绘制的（包括画面上所有的可见的对象，都是需要每帧重绘的），所以consol ...

哦，就相当于写在了LEvent.ENTER_FRAME事件中吧，是否有方法让它只绘制一遍呢

ningbnii

lufy 发表于 2020-1-8 14:14
虽然每帧重绘，但每帧就是绘制一遍啊，这个没什么不对的啊
画面上所有东西都是每帧重绘的，不然画面就成了 ...

比如我定义一个画圆的方法，里面调用add去用原生canvas去画的
function drawingCircle() {
  drawing.graphics.add(function (ctx) {
    // 画个圆
ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();
    console.log(123);
  })
}
我觉得这个圆应该是静态的吧，我如果想让它动起来，应该是在ENTER_FRAME中添加对它的控制逻辑吧，
如果我没有监听ENTER_FRAME，它应该就绘制一遍才对劲吧

ningbnii

lufy 发表于 2020-1-8 15:09
不是的，画面上所有东西，即使它们不动，也是每帧全部擦除然后重绘的，不过开发者不需要关心这些
所谓的有 ...

哦，我现在是将所有的点放到一个数组中，在mouse_move的时候循环所有点去绘制，在mouse_up的时候将数组置空，但是这个时候add方法还在绘制，就会发现刚画的线条没了，所以我想如果add不去自动重复执行就没这个问题了，不知道有没有其他的方式可以解决

ningbnii

lufy 发表于 2020-1-8 15:42
graphics.add加进来的东西，如果不用的话，你需要用graphics.clear来清除的

是想保留的，因为我做的是个画板，就是要保留绘画的笔迹，现在是add在不停的绘制，数组一清空，笔迹也没了

ningbnii

lufy 发表于 2020-1-8 15:59
你的代码里的判定是points.length大于0的时候才会绘制啊，但是你把points清空了 ...

因为从鼠标按下，到鼠标抬起，这个过程是一笔嘛，我这个points记录的就是这一笔的所有点的坐标，那么在鼠标抬起来的时候，我就需要把points清空，以便记录下一笔，所以这个清空是有必要的。我之所以在mouse_move那里加上points.length的判断，是因为add一直在跑着嘛，points已经清空了，还在绘制，就会报错了

ningbnii

lufy 发表于 2020-1-8 16:16
但是，你用笔刷画图的那部分代码也被points限制了啊，所以虽然引擎去执行graphics.add里面的绘图代码，但 ...

那这样我是不是就得把每一笔的笔画都在add中跑着啊，这样如果点多了，感觉效率肯定会受到影响的

我刚才测试了一下，不使用add，直接用graphics的moveTo和lineTo是可以保留笔迹的，但是这个没有shadowBlur 和 shadowColor，我还想用这两个方法去设置一下笔刷效果

ningbnii

lufy 发表于 2020-1-8 16:27
的确是这样，所以笔刷这样写是没问题的，画板就需要优化一下
方法1，每次使用一个临时画板，画完一笔之后 ...

感谢lufy的指点，我研究一下demo

ningbnii

lufy 发表于 2020-1-8 16:37
不客气，有问题再交流

    bitmapdata1 = new LBitmapData(null,0,0,w,h,LBitmapData.DATA_CANVAS);
    ctx = bitmapdata1._canvas.getContext('2d');
    bitmap1 = new LBitmap(bitmapdata1);


发现LBitmapdata中有个canvas对象，然后尝试了一下getContext，发现可行，使用ctx实现了调用原生api绘画