lufy's legend

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1767|回复: 17

关于LGraphics类的add方法问题

[复制链接]

6

主题

1

好友

198

积分

士兵

Rank: 1

发表于 2020-1-8 11:16:31 |显示全部楼层
本帖最后由 ningbnii 于 2020-1-8 11:20 编辑

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

QQ截图20200108111219.png



回复

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2020-1-8 13:20:05 |显示全部楼层
graphics.add所添加的线,是会每帧绘制的(包括画面上所有的可见的对象,都是需要每帧重绘的),所以console.log循环触发是正常的
不回答与技术和引擎不相关的问题
回复

使用道具 举报

6

主题

1

好友

198

积分

士兵

Rank: 1

发表于 2020-1-8 14:05:48 |显示全部楼层
lufy 发表于 2020-1-8 13:20
graphics.add所添加的线,是会每帧绘制的(包括画面上所有的可见的对象,都是需要每帧重绘的),所以consol ...

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

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2020-1-8 14:14:53 |显示全部楼层
ningbnii 发表于 2020-1-8 14:05
哦,就相当于写在了LEvent.ENTER_FRAME事件中吧,是否有方法让它只绘制一遍呢 ...

虽然每帧重绘,但每帧就是绘制一遍啊,这个没什么不对的啊
画面上所有东西都是每帧重绘的,不然画面就成了静态的了
不回答与技术和引擎不相关的问题
回复

使用道具 举报

6

主题

1

好友

198

积分

士兵

Rank: 1

发表于 2020-1-8 14:59:54 |显示全部楼层
本帖最后由 ningbnii 于 2020-1-8 15:01 编辑
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,它应该就绘制一遍才对劲吧
回复

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2020-1-8 15:09:58 |显示全部楼层
ningbnii 发表于 2020-1-8 14:59
比如我定义一个画圆的方法,里面调用add去用原生canvas去画的
function drawingCircle() {
  drawing.grap ...

不是的,画面上所有东西,即使它们不动,也是每帧全部擦除然后重绘的,不过开发者不需要关心这些
所谓的有没有重复绘制,就是指在一帧内有没有重复
不回答与技术和引擎不相关的问题
回复

使用道具 举报

6

主题

1

好友

198

积分

士兵

Rank: 1

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

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

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2020-1-8 15:42:50 |显示全部楼层
ningbnii 发表于 2020-1-8 15:40
哦,我现在是将所有的点放到一个数组中,在mouse_move的时候循环所有点去绘制,在mouse_up的时候将数组置 ...

graphics.add加进来的东西,如果不用的话,你需要用graphics.clear来清除的
不回答与技术和引擎不相关的问题
回复

使用道具 举报

6

主题

1

好友

198

积分

士兵

Rank: 1

发表于 2020-1-8 15:56:01 |显示全部楼层
lufy 发表于 2020-1-8 15:42
graphics.add加进来的东西,如果不用的话,你需要用graphics.clear来清除的

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

使用道具 举报

36

主题

7

好友

8910

积分

诸侯王

Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15

发表于 2020-1-8 15:59:53 |显示全部楼层
ningbnii 发表于 2020-1-8 15:56
是想保留的,因为我做的是个画板,就是要保留绘画的笔迹,现在是add在不停的绘制,数组一清空,笔迹也没 ...
  1. drawing.graphics.add(function (ctx) {
  2.       if(points.length){

  3.         ctx.beginPath();
  4.         ctx.moveTo(points[0].x,points[0].y);
  5.         for (var i=1;i<points.length;i++){
  6.           ctx.lineTo(points[i].x,points[i].y);
  7.         }
  8.         ctx.stroke();
  9.       }
  10.     })
复制代码
你的代码里的判定是points.length大于0的时候才会绘制啊,但是你把points清空了
不回答与技术和引擎不相关的问题
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

防止垃圾广告,请填写任意字符

Archiver|lufy's legend

GMT+8, 2020-8-12 20:58 , Processed in 0.091893 second(s), 24 queries .

Powered by Discuz! X2.5

© 2001-2012 Comsenz Inc.

回顶部