如何在使用可变宽度笔画进行绘制时使绘制路径平滑答案

【问题标题】：How to make draw path smooth while drawing with variable width stroke如何在使用可变宽度笔画进行绘制时使绘制路径平滑
【发布时间】：2013-12-16 12:13:54
【问题描述】：

我创建了一个示例绘图应用程序，用户可以在其中使用可变宽度描边进行绘制，到目前为止，使用可变描边绘制路径是有效的，但绘制的线条并不平滑。我用来实现的代码如下所示。

帮我解决这个问题，因为我在过去两天一直卡在这个问题上。

使用可变笔划宽度绘制路径的代码

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);
        }
    }
}

我得到的输出结果

我想要实现的输出

【问题讨论】：

你检查过 APIDemos 中的 FingerPaint 演示吗？？它具有相同的功能。并检查此S-pen SDK
@SilentKiller FingerPaint 演示不支持可变宽度笔画支持，我仅使用从那里的概念编写此示例应用程序，其次如果我切换到 S-penSdk，那么我的应用程序将仅在三星设备上运行.
没有人可以为每台设备使用该 SDK。它不仅限于三星设备。下载该 API 并尝试一下。相信这会解决您的问题。
我用过它，当我在 HTC、LG 等其他设备上运行时，应用程序崩溃并且在 logcat 中显示，该设备不是三星设备。
@SilentKiller 好的，没问题，所以你使用 SpenSdk 或使用我的代码创建演示。

标签： java android android-canvas

【解决方案1】：

当您检测到更改时，无需立即跳到新的笔划宽度，您可以设置一个目标并朝它进行插值，直到您到达它。您的 mStrokes 需要是 Floats 而不是 Integers。

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);
}

您将在当前设置variableWidthDelta 的位置更新targetStroke。

【讨论】：

我使用了你的逻辑并更新了代码，你能检查一下我使用你的逻辑的方式是否正确
mStrokes 必须是 List<Float> 而不是 List<Integer> 并在添加时删除 (int) 演员表。也不要在每次发生移动事件时都添加它，您的其他逻辑需要 mStrokes 和 mPaths 的索引匹配，现在看起来已经坏了。运行时会发生什么？
这个pastebin.com/RUzBiPMN 是我在代码中所做的最后更改，它很好但并不完美，你能检查一下代码有什么问题吗。
这是屏幕截图imageshack.com/i/jjgdd7p imageshack.com/i/jwkbgup
代码和输出对我来说看起来不错。由于看起来您的目标可能是手写，因此您可以查看this article about smooth signatures 以获得更高级的想法。

【解决方案2】：

您当前的代码几乎将每个触摸移动事件（超过一定的增量距离）转换为新的路径段。要制作一条平滑的路径，就需要对用户接触到的大量初始点进行一些处理，将其转化为数量较少的四边形或三次形路径段。

看看这个页面上的演示：http://paperjs.org/tutorials/paths/smoothing-simplifying-flattening/#simplifying-paths和对应的简化代码：https://github.com/paperjs/paper.js/blob/master/src/path/PathFitter.js

显然它是用 JavaScript 而不是 Java，但您需要使用类似的算法。一个额外的复杂情况是，您可能必须在平滑后再次将平滑的路径段分解为多个子段，以支持单个段内的不同笔划宽度。

【讨论】：