作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
使用我在 this StackOverflow answer 中找到的代码我成功地可以用手指在 Canvas 中绘制任何东西,并且我会在绘制时看到我绘制的内容。由此,我想制作一个在按钮按下时触发的功能,它会做两件事:
onTouchEvent
代码,因此它相应地存储每个绘制的点:
@Override
public boolean onTouchEvent(MotionEvent event) {
StrokePoint point;
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
mPath.moveTo(event.getX(), event.getY());
// Retrieve strokes in memory
stroke_buffer = new Stroke();
stroke_buffer.points = new ArrayList<StrokePoint>();
point = new StrokePoint();
point.x = event.getX();
point.y = event.getY();
stroke_buffer.points.add( point );
break;
case MotionEvent.ACTION_MOVE:
mPath.lineTo(event.getX(), event.getY());
// Retrieve strokes in memory
point = new StrokePoint();
point.x = event.getX();
point.y = event.getY();
stroke_buffer.points.add( point );
invalidate();
break;
case MotionEvent.ACTION_UP:
// Retrieve strokes in memory
strokes.add(stroke_buffer);
break;
default:
break;
}
return true;
}
这样,我可以稍后在循环中加载 X 和 Y 点(至少是这个想法)。问题是我不确定如何在 Canvas 上为每一行触发“重绘”。我试图像这样从“onDraw”存储 Canvas :
@Override
protected void onDraw(Canvas canvas) {
canvas.drawPath(mPath, mPaint);
// For trying to make the "redraw" later
this.mCanvas = canvas;
super.onDraw(canvas);
}
然后,我为要删除并重放先前绘制的笔划的按钮创建此方法:
public void replayStrokes() {
// I start a new path from scratch ad-hoc the "redraw" animation.
mPath = new Path();
Log.i("SANDBOX_INFO", "Button pressed");
// Intention here is leaving the "whiteboard" clear again.
mCanvas.drawRGB(255, 255, 255);
invalidate();
this.draw(mCanvas);
SystemClock.sleep(1000);
// Redraw "line by line" loop
mPath.moveTo(strokes.get(0).points.get(0).x,
strokes.get(0).points.get(0).y);
for (int i = 0; i < strokes.size(); i++) {
for (int j = 0; j < strokes.get(i).points.size(); j++) {
if (i == 0 && j == 0) continue;
mPath.lineTo(strokes.get(i).points.get(j).x,
strokes.get(i).points.get(j).y);
mCanvas.drawPath(mPath, mPaint);
invalidate();
this.draw(mCanvas);
SystemClock.sleep(100);
}
}
}
当我按下按钮时,方法
replayStrokes
不符合预期。就好像它仍然在“思考”(处理),并且在你最不期待的时候,一口气刷新了所有的变化;相反,我希望它是一个流畅的动画,您可以看到之前用手指绘制的整个路径,逐行,逐点重播。我究竟做错了什么?我应该改变什么以获得预期的行为?
最佳答案
感谢@VitorHugoSchwaab 的评论,我最终找到了解决方案。小提醒:我在这个问题中发布的所有代码都应该在 public class DrawCanvas extends View
中。类(class)。那说:
所以,我留下了这样的“触发方法”:
private int s, p;
private boolean replay_mode;
public void replayStrokes() {
s = 0;
p = 0;
replay_mode = true;
invalidate();
}
我修改了
onDraw
像这样的方法(我将其转换为
Megamoth,但我可以稍后修复:P):
@Override
protected void onDraw(Canvas canvas) {
if (replay_mode) {
if (s == 0 && p == 0) {
Log.i("SANDBOX_INFO", "Replay Mode START");
canvas.drawRGB(255, 255, 255);
p++;
replayPath.reset();
replayPath.moveTo(strokes.get(0).points.get(0).x,
strokes.get(0).points.get(0).y);
invalidate();
} else {
Log.i("SANDBOX_INFO", "Replaying --> S:" + s + " P:" + p);
if (p == 0) {
replayPath.moveTo(strokes.get(s).points.get(p).x,
strokes.get(s).points.get(p).y);
} else {
replayPath.lineTo(strokes.get(s).points.get(p).x,
strokes.get(s).points.get(p).y);
canvas.drawPath(replayPath, mPaint);
}
int points_size = strokes.get(s).points.size();
if (s == strokes.size() - 1 && p == points_size - 1) {
Log.i("SANDBOX_INFO", "Replay Mode END");
replay_mode = false;
}
else if (p == points_size - 1) {
s++;
p = 0;
} else {
p++;
}
}
invalidate();
} else {
canvas.drawPath(mPath, mPaint);
}
super.onDraw(canvas);
}
这行得通。但是,在重放笔画时会出现“闪烁”的故障效果。我认为这可能是因为它实际上是在每一帧上“重绘”整个“重播路径”。基于这个猜测,当我有更多时间编写代码时,我会尝试解决这个问题。
关于java - 如何使用 View 的子级制作绘图动画,逐个绘制每个 Path 的线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70934566/
我尝试在 d3.js 中进行链式转换。为此,我在数组中定义了一组转换,并(尝试)创建一个函数以使用 .each("end", function()) 递归调用它们,以在前一个为完成,但我还没有结果。
我是一名优秀的程序员,十分优秀!