我创建了一个示例绘图应用程序,用户可以使用可变宽度笔划绘制,到目前为止,可变笔划的绘图路径正在工作,但绘制的线条不平滑。我用来实现的代码如下所示。
帮助我解决这个问题,因为最近两天我坚持这一点。
使用可变笔触宽度绘制路径的代码
public class FingerPaint extends GraphicsActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new MyView(this));
}
public void colorChanged(int color) {
}
public class MyView extends View {
private static final float STROKE_WIDTH = 5f;
private Paint paint = new Paint();
private Path mPath = new Path();
ArrayList<Path> mPaths = new ArrayList<Path>();
ArrayList<Integer> mStrokes = new ArrayList<Integer>();
private float lastTouchX;
private float lastTouchY;
private final RectF dirtyRect = new RectF();
private int lastStroke = -1;
int variableWidthDelta = 0;
private static final float STROKE_DELTA = 0.0001f; // for float comparison
private static final float STROKE_INCREMENT = 0.01f; // amount to interpolate
private float currentStroke = STROKE_WIDTH;
private float targetStroke = STROKE_WIDTH;
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;
public MyView(Context context) {
super(context);
paint.setAntiAlias(true);
paint.setDither(true);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeJoin(Paint.Join.ROUND);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStrokeWidth(STROKE_WIDTH);
}
public void clear() {
mPath.reset();
// Repaints the entire view.
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
for(int i=0; i<mPaths.size();i++) {
paint.setStrokeWidth(mStrokes.get(i));
canvas.drawPath(mPaths.get(i), paint);
}
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float eventX = event.getX();
float eventY = event.getY();
int historySize = event.getHistorySize();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN: {
resetDirtyRect(eventX, eventY);
// mPath.reset();
mPath.moveTo(eventX, eventY);
mX = eventX;
mY = eventY;
break;
}
case MotionEvent.ACTION_MOVE: {
if (event.getPressure()>=0.00 && event.getPressure()<0.05) {
variableWidthDelta = -2;
} else if (event.getPressure()>=0.05 && event.getPressure()<0.10) {
variableWidthDelta = -2;
} else if (event.getPressure()>=0.10 && event.getPressure()<0.15) {
variableWidthDelta = -2;
} else if (event.getPressure()>=0.15 && event.getPressure()<0.20) {
variableWidthDelta = -2;
} else if (event.getPressure()>=0.20 && event.getPressure()<0.25) {
variableWidthDelta = -2;
} else if (event.getPressure() >= 0.25 && event.getPressure()<0.30) {
variableWidthDelta = 1;
} else if (event.getPressure() >= 0.30 && event.getPressure()<0.35) {
variableWidthDelta = 2;
} else if (event.getPressure() >= 0.35 && event.getPressure()<0.40) {
variableWidthDelta = 3;
} else if (event.getPressure() >= 0.40 && event.getPressure()<0.45) {
variableWidthDelta = 4;
} else if (event.getPressure() >= 0.45 && event.getPressure()<0.60) {
variableWidthDelta = 5;
}
// if current not roughly equal to target
if( Math.abs(targetStroke - currentStroke) > STROKE_DELTA )
{
// move towards target by the increment
if( targetStroke > currentStroke)
{
currentStroke = Math.min(targetStroke, currentStroke + STROKE_INCREMENT);
}
else
{
currentStroke = Math.max(targetStroke, currentStroke - STROKE_INCREMENT);
}
}
mStrokes.add((int) currentStroke);
targetStroke = variableWidthDelta;
float dx = Math.abs(eventX - mX);
float dy = Math.abs(eventY - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
if(lastStroke != variableWidthDelta) {
mPath.lineTo(mX, mY);
mPath = new Path();
mPath.moveTo(mX,mY);
mPaths.add(mPath);
}
mPath.quadTo(mX, mY, (eventX + mX)/2, (eventY + mY)/2);
mX = eventX;
mY = eventY;
}
for (int i = 0; i < historySize; i++) {
float historicalX = event.getHistoricalX(i);
float historicalY = event.getHistoricalY(i);
expandDirtyRect(historicalX, historicalY);
}
break;
}
case MotionEvent.ACTION_UP: {
for (int i = 0; i < historySize; i++) {
float historicalX = event.getHistoricalX(i);
float historicalY = event.getHistoricalY(i);
expandDirtyRect(historicalX, historicalY);
}
mPath.lineTo(mX, mY);
break;
}
}
// Include half the stroke width to avoid clipping.
invalidate();
lastTouchX = eventX;
lastTouchY = eventY;
lastStroke = variableWidthDelta;
return true;
}
private void expandDirtyRect(float historicalX, float historicalY) {
if (historicalX < dirtyRect.left) {
dirtyRect.left = historicalX;
} else if (historicalX > dirtyRect.right) {
dirtyRect.right = historicalX;
}
if (historicalY < dirtyRect.top) {
dirtyRect.top = historicalY;
} else if (historicalY > dirtyRect.bottom) {
dirtyRect.bottom = historicalY;
}
}
/**
* Resets the dirty region when the motion event occurs.
*/
private void resetDirtyRect(float eventX, float eventY) {
// The lastTouchX and lastTouchY were set when the ACTION_DOWN
// motion event occurred.
dirtyRect.left = Math.min(lastTouchX, eventX);
dirtyRect.right = Math.max(lastTouchX, eventX);
dirtyRect.top = Math.min(lastTouchY, eventY);
dirtyRect.bottom = Math.max(lastTouchY, eventY);
}
}
}
我得到的输出结果
我想要实现的输出
答案 0 :(得分:3)
当您检测到更改时,您可以设置目标并插入目标直到达到它,而不是立即跳到新的笔触宽度。您的mStrokes
需要Float
而不是Integer
s。
private static final float STROKE_DELTA = 0.0001f; // for float comparison
private static final float STROKE_INCREMENT = 0.01f; // amount to interpolate
private float currentStroke = STROKE_WIDTH;
private float targetStroke = STROKE_WIDTH;
您当前为新笔触宽度创建新路径,请执行以下操作:
// if current not roughly equal to target
if( Math.abs(targetStroke - currentStroke) > STROKE_DELTA ) {
// move towards target by the increment
if( targetStroke > currentStroke )
currentStroke = Math.min(targetStroke, currentStroke + STROKE_INCREMENT);
else
currentStroke = Math.max(targetStroke, currentStroke - STROKE_INCREMENT);
mPath.lineTo(mX, mY);
mPath = new Path();
mPath.moveTo(mX,mY);
mPaths.add(mPath);
mStrokes.add(currentStroke);
}
您可以更新当前设置targetStroke
的地方variableWidthDelta
。
答案 1 :(得分:0)
您当前的代码几乎将每个触摸移动事件(超过某个增量距离)转换为新的路径段。要制作平滑路径,您需要对用户触摸的大量初始点进行一些处理,并将其转换为较少数量的四段或三维路径段。
请查看此页面上的演示:http://paperjs.org/tutorials/paths/smoothing-simplifying-flattening/#simplifying-paths以及相应的简化代码:https://github.com/paperjs/paper.js/blob/master/src/path/PathFitter.js
显然它是用JavaScript而不是Java,但你需要使用类似的算法。更复杂的是,您可能必须在平滑后再次将平滑的路径段分解为多个子段,以支持单个段内的不同笔划宽度。