关于LGraphics类的add方法问题
本帖最后由 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',);
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
graphics.add所添加的线，是会每帧绘制的（包括画面上所有的可见的对象，都是需要每帧重绘的），所以console.log循环触发是正常的
lufy 发表于 2020-1-8 13:20 static/image/common/back.gif
graphics.add所添加的线，是会每帧绘制的（包括画面上所有的可见的对象，都是需要每帧重绘的），所以consol ...
哦，就相当于写在了LEvent.ENTER_FRAME事件中吧，是否有方法让它只绘制一遍呢 ningbnii 发表于 2020-1-8 14:05 static/image/common/back.gif
哦，就相当于写在了LEvent.ENTER_FRAME事件中吧，是否有方法让它只绘制一遍呢 ...
虽然每帧重绘，但每帧就是绘制一遍啊，这个没什么不对的啊
画面上所有东西都是每帧重绘的，不然画面就成了静态的了 本帖最后由 ningbnii 于 2020-1-8 15:01 编辑
lufy 发表于 2020-1-8 14:14 static/image/common/back.gif
虽然每帧重绘，但每帧就是绘制一遍啊，这个没什么不对的啊
画面上所有东西都是每帧重绘的，不然画面就成了 ...
比如我定义一个画圆的方法，里面调用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 发表于 2020-1-8 14:59 static/image/common/back.gif
比如我定义一个画圆的方法，里面调用add去用原生canvas去画的
function drawingCircle() {
drawing.grap ...
不是的，画面上所有东西，即使它们不动，也是每帧全部擦除然后重绘的，不过开发者不需要关心这些
所谓的有没有重复绘制，就是指在一帧内有没有重复 lufy 发表于 2020-1-8 15:09 static/image/common/back.gif
不是的，画面上所有东西，即使它们不动，也是每帧全部擦除然后重绘的，不过开发者不需要关心这些
所谓的有 ...
哦，我现在是将所有的点放到一个数组中，在mouse_move的时候循环所有点去绘制，在mouse_up的时候将数组置空，但是这个时候add方法还在绘制，就会发现刚画的线条没了，所以我想如果add不去自动重复执行就没这个问题了，不知道有没有其他的方式可以解决
ningbnii 发表于 2020-1-8 15:40 static/image/common/back.gif
哦，我现在是将所有的点放到一个数组中，在mouse_move的时候循环所有点去绘制，在mouse_up的时候将数组置 ...
graphics.add加进来的东西，如果不用的话，你需要用graphics.clear来清除的 lufy 发表于 2020-1-8 15:42 static/image/common/back.gif
graphics.add加进来的东西，如果不用的话，你需要用graphics.clear来清除的
是想保留的，因为我做的是个画板，就是要保留绘画的笔迹，现在是add在不停的绘制，数组一清空，笔迹也没了 ningbnii 发表于 2020-1-8 15:56 static/image/common/back.gif
是想保留的，因为我做的是个画板，就是要保留绘画的笔迹，现在是add在不停的绘制，数组一清空，笔迹也没 ...
drawing.graphics.add(function (ctx) {
if(points.length){
ctx.beginPath();
ctx.moveTo(points.x,points.y);
for (var i=1;i<points.length;i++){
ctx.lineTo(points.x,points.y);
}
ctx.stroke();
}
})你的代码里的判定是points.length大于0的时候才会绘制啊，但是你把points清空了
页:
[1]
2