Java FX版的毛笔效果

由于项目中有实现毛笔的效果的要求，所以在网上找了一个Android的demo，然后将其改成了Java FX版本的，算法来自网上某个Android的demo（不好意思忘记了原来的url，如果原版作者有意见可以联系我）。

package brush;

import javafx.scene.paint.Color;

/**
 * @des  笔的设置，但是有些笔的设置最好不要放在这里，不要笔的颜色和宽度
 */
public interface IPenConfig {

    /**
     * 清除画布
     */
    int STROKE_TYPE_ERASER = 0;

    /**
     * 钢笔
     */
     int STROKE_TYPE_PEN = 1;// 钢笔
    /**
     * 毛笔
     */
    int STROKE_TYPE_BRUSH = 2;// 毛笔

    //设置笔的宽度
    int PEN_WIDTH=60;
    //笔的颜色
    Color PEN_CORLOUR= Color.valueOf("#FF4081");

    //这个控制笔锋的控制值
     float DIS_VEL_CAL_FACTOR = 0.02f;
    //手指在移动的控制笔的变化率  这个值越大，线条的粗细越加明显
    //float WIDTH_THRES_MAX = 0.6f;
     float WIDTH_THRES_MAX = 10f;
    //绘制计算的次数，数值越小计算的次数越多，需要折中
     int STEPFACTOR = 10;
}

package brush;


/**
 * @des 每个点的控制，关心三个因素：笔的宽度，坐标,透明数值
 */
public class ControllerPoint {
    public float x;
    public float y;

    public float width;
    public int alpha = 255;
    public ControllerPoint() {
    }

    public ControllerPoint(float x, float y) {
        this.x = x;
        this.y = y;
    }


    public void set(float x, float y, float w) {
        this.x = x;
        this.y = y;
        this.width = w;
    }


    public void set(ControllerPoint point) {
        this.x = point.x;
        this.y = point.y;
        this.width = point.width;
    }


    public String toString() {
        String str = "X = " + x + "; Y = " + y + "; W = " + width;
        return str;
    }


}

package brush;


/**
 * @des  对点的位置和宽度控制的bezier曲线，主要是两个点，都包含了宽度和点的坐标
 */
public class Bezier {
    //控制点的，
    private ControllerPoint mControl = new ControllerPoint();
    //距离
    private ControllerPoint mDestination = new ControllerPoint();
    //下一个需要控制点
    private ControllerPoint mNextControl = new ControllerPoint();
    //资源的点
    private ControllerPoint mSource = new ControllerPoint();

    public Bezier() {
    }

    /**
     * 初始化两个点，
     * @param last 最后的点的信息
     * @param cur 当前点的信息,当前点的信息，当前点的是根据事件获得，同时这个当前点的宽度是经过计算的得出的
     */
    public void init(ControllerPoint last, ControllerPoint cur)
    {
        init(last.x, last.y, last.width, cur.x, cur.y, cur.width);
    }

    public void init(float lastx, float lasty, float lastWidth, float x, float y, float width)
    {
        //资源点设置，最后的点的为资源点
        mSource.set(lastx, lasty, lastWidth);
        float xmid = getMid(lastx, x);
        float ymid = getMid(lasty, y);
        float wmid = getMid(lastWidth, width);
        //距离点为平均点
        mDestination.set(xmid, ymid, wmid);
        //控制点为当前的距离点
        mControl.set(getMid(lastx,xmid),getMid(lasty,ymid),getMid(lastWidth,wmid));
        //下个控制点为当前点
        mNextControl.set(x, y, width);
    }

    public void addNode(ControllerPoint cur){
        addNode(cur.x, cur.y, cur.width);
    }

    /**
     * 替换就的点，原来的距离点变换为资源点，控制点变为原来的下一个控制点，距离点取原来控制点的和新的的一半
     * 下个控制点为新的点
     * @param x 新的点的坐标
     * @param y 新的点的坐标
     * @param width
     */
    public void addNode(float x, float y, float width){
        mSource.set(mDestination);
        mControl.set(mNextControl);
        mDestination.set(getMid(mNextControl.x, x), getMid(mNextControl.y, y), getMid(mNextControl.width, width));
        mNextControl.set(x, y, width);
    }

    /**
     * 结合手指抬起来的动作，告诉现在的曲线控制点也必须变化，其实在这里也不需要结合着up事件使用
     * 因为在down的事件中，所有点都会被重置，然后设置这个没有多少意义，但是可以改变下个事件的朝向改变
     * 先留着，因为后面如果需要控制整个颜色的改变的话，我的依靠这个方法，还有按压的时间的变化
     */
    public void end() {
        mSource.set(mDestination);
        float x = getMid(mNextControl.x, mSource.x);
        float y = getMid(mNextControl.y, mSource.y);
        float w = getMid(mNextControl.width, mSource.width);
        mControl.set(x, y, w);
        mDestination.set(mNextControl);
    }

    /**
     *
     * @param t 控制点
     * @return
     */
    public ControllerPoint getPoint(double t){
        float x = (float)getX(t);
        float y = (float)getY(t);
        float w = (float)getW(t);
        ControllerPoint point = new ControllerPoint();
        point.set(x,y,w);
        return point;
    }

    /**
     * 三阶曲线的控制点
     * @param p0
     * @param p1
     * @param p2
     * @param t
     * @return
     */
    private double getValue(double p0, double p1, double p2, double t){
        double A = p2 - 2 * p1 + p0;
        double B = 2 * (p1 - p0);
        double C = p0;
        return A * t * t + B * t + C;
    }

    private double getX(double t) {
        return getValue(mSource.x, mControl.x, mDestination.x, t);
    }

    private double getY(double t) {
        return getValue(mSource.y, mControl.y, mDestination.y, t);
    }

    private double getW(double t){
        return getWidth(mSource.width, mDestination.width, t);
    }

    /**
     *
     * @param x1 一个点的x
     * @param x2 一个点的x
     * @return
     */
    private float getMid(float x1, float x2) {
        return (float)((x1 + x2) / 2.0);
    }

    private double getWidth(double w0, double w1, double t){
        return w0 + (w1 - w0) * t;
    }

}

package brush;



import java.util.ArrayList;

import javafx.scene.input.MouseEvent;
import javafx.scene.layout.Pane;
import javafx.scene.shape.Ellipse;

public  class BasePenExtend  {

    public ArrayList<ControllerPoint> mHWPointList = new ArrayList<>();

    public ArrayList<ControllerPoint> mPointList = new ArrayList<ControllerPoint>();

    public ControllerPoint mLastPoint = new ControllerPoint(0, 0);

    //笔的宽度信息
    public double mBaseWidth;

    public double mLastVel;

    public double mLastWidth;

    public Bezier mBezier = new Bezier();

    protected ControllerPoint mCurPoint;

    public BasePenExtend() {

    }

    public void setPaint(double width) {

        mBaseWidth = width;
    }

    public void draw(Pane pane) {
        //点的集合少 不去绘制
        if (mHWPointList == null || mHWPointList.size() < 1)
            return;
        //当控制点的集合很少的时候，需要画个小圆，但是需要算法
        if (mHWPointList.size() < 2) {
            ControllerPoint point = mHWPointList.get(0);
            //由于此问题在算法上还没有实现，所以暂时不给他画圆圈
            //canvas.drawCircle(point.x, point.y, point.width, mPaint);
        } else {
            mCurPoint = mHWPointList.get(0);
            drawNeetToDo(pane);
        }
    }


    public boolean onTouchEvent(int mouseType,MouseEvent event, Pane canvas) {
        // event会被下一次事件重用，这里必须生成新的，否则会有问题
       
        switch (mouseType) {
            case 0:
                onDown(event);
                return true;
            case 1:
                onMove(event);
                return true;
            case 2:
                onUp(event, canvas);
                return true;
            default:
                break;
        }
        return false;
    }

    /**
     * 按下的事件
     *
     * @param mElement
     */
    public void onDown(MouseEvent mElement) {
       
        mPointList.clear();
        //如果在brush字体这里接受到down的事件，把下面的这个集合清空的话，那么绘制的内容会发生改变
        //不清空的话，也不可能
        mHWPointList.clear();
        //记录down的控制点的信息
        ControllerPoint curPoint = new ControllerPoint((float)mElement.getSceneX(), (float)mElement.getSceneY());
        //如果用笔画的画我的屏幕，记录他宽度的和压力值的乘，但是哇，
        /*if (mElement.tooltype == MotionEvent.TOOL_TYPE_STYLUS) {
            mLastWidth = mElement.pressure * mBaseWidth;
        } else {*/
        //如果是手指画的，我们取他的0.8
        mLastWidth = 0.8 * mBaseWidth;
       /* }*/
        //down下的点的宽度
        curPoint.width = (float) mLastWidth;
        mLastVel = 0;
        mPointList.add(curPoint);
        //记录当前的点
        mLastPoint = curPoint;
    }

   

    /**
     * 手指移动的事件
     *
     * @param mElement
     */
    public void onMove(MouseEvent mElement) {

        ControllerPoint curPoint = new ControllerPoint((float)mElement.getSceneX(), (float)mElement.getSceneY());
        double deltaX = curPoint.x - mLastPoint.x;
        double deltaY = curPoint.y - mLastPoint.y;
        //deltaX和deltay平方和的二次方根 想象一个例子 1+1的平方根为1.4 （x²+y²）开根号
        //同理，当滑动的越快的话，deltaX+deltaY的值越大，这个越大的话，curDis也越大
        double curDis = Math.hypot(deltaX, deltaY);
        //我们求出的这个值越小，画的点或者是绘制椭圆形越多，这个值越大的话，绘制的越少，笔就越细，宽度越小
        double curVel = curDis * IPenConfig.DIS_VEL_CAL_FACTOR;
        double curWidth;
        //点的集合少，我们得必须改变宽度,每次点击的down的时候，这个事件
        if (mPointList.size() < 2) {
            /*if (mElement.tooltype == MotionEvent.TOOL_TYPE_STYLUS) {
                curWidth = mElement.pressure * mBaseWidth;
            } else {*/
            curWidth = calcNewWidth(curVel, mLastVel, curDis, 1.5,
                    mLastWidth);
          /*  }*/
            curPoint.width = (float) curWidth;
            mBezier.init(mLastPoint, curPoint);
        } else {
            mLastVel = curVel;
          /*  if (mElement.tooltype == MotionEvent.TOOL_TYPE_STYLUS) {
                curWidth = mElement.pressure * mBaseWidth;
            } else {*/
            //由于我们手机是触屏的手机，滑动的速度也不慢，所以，一般会走到这里来
            //阐明一点，当滑动的速度很快的时候，这个值就越小，越慢就越大，依靠着mlastWidth不断的变换
            curWidth = calcNewWidth(curVel, mLastVel, curDis, 1.5,
                    mLastWidth);
            /*}*/
            curPoint.width = (float) curWidth;
            mBezier.addNode(curPoint);
        }
        //每次移动的话，这里赋值新的值
        mLastWidth = curWidth;
        mPointList.add(curPoint);
        moveNeetToDo(curDis);
        mLastPoint = curPoint;
    }


    /**
     * 手指抬起来的事件
     *
     * @param mElement
     * @param canvas
     */
    public void onUp(MouseEvent mElement, Pane canvas) {

        mCurPoint = new ControllerPoint((float)mElement.getSceneX(), (float)mElement.getSceneY());
        double deltaX = mCurPoint.x - mLastPoint.x;
        double deltaY = mCurPoint.y - mLastPoint.y;
        double curDis = Math.hypot(deltaX, deltaY);
        //如果用笔画的画我的屏幕，记录他宽度的和压力值的乘，但是哇，这个是不会变的
       /* if (mElement.tooltype == MotionEvent.TOOL_TYPE_STYLUS) {
            mCurPoint.width = (float) (mElement.pressure * mBaseWidth);
        } else {*/
        mCurPoint.width = 0;
       /* }*/

        mPointList.add(mCurPoint);

        mBezier.addNode(mCurPoint);

        int steps = 1 + (int) curDis / IPenConfig.STEPFACTOR;
        double step = 1.0 / steps;
        for (double t = 0; t < 1.0; t += step) {
            ControllerPoint point = mBezier.getPoint(t);
            mHWPointList.add(point);
        }
        //
        mBezier.end();
        for (double t = 0; t < 1.0; t += step) {
            ControllerPoint point = mBezier.getPoint(t);
            mHWPointList.add(point);
        }

        // 手指up 我画到纸上上
        draw(canvas);
        //每次抬起手来，就把集合清空，在水彩笔的那个地方，如果啊，我说如果不清空的话，每次抬起手来，
        // 在onDown下去的话，最近画的线的透明度有改变，所以这里clear下线的集合
        clear();
    }

    /**
     * @param curVel
     * @param lastVel
     * @param curDis
     * @param factor
     * @param lastWidth
     * @return
     */
    public double calcNewWidth(double curVel, double lastVel, double curDis,
                               double factor, double lastWidth) {
        double calVel = curVel * 0.6 + lastVel * (1 - 0.6);
        //返回指定数字的自然对数
        //手指滑动的越快，这个值越小，为负数
        double vfac = Math.log(factor * 2.0f) * (-calVel);
        //此方法返回值e，其中e是自然对数的基数。
        //Math.exp(vfac) 变化范围为0 到1 当手指没有滑动的时候 这个值为1 当滑动很快的时候无线趋近于0
        //在次说明下，当手指抬起来，这个值会变大，这也就说明，抬起手太慢的话，笔锋效果不太明显
        //这就说明为什么笔锋的效果不太明显
        double calWidth = mBaseWidth * Math.exp(vfac);

        //滑动的速度越快的话，mMoveThres也越大
        double mMoveThres = curDis * 0.01f;
        //对之值最大的地方进行控制
        if (mMoveThres > IPenConfig.WIDTH_THRES_MAX) {
            mMoveThres = IPenConfig.WIDTH_THRES_MAX;
        }
        // TODO: 2018/2/24   以下的方法 可以删除掉  原因是抽取了一下 ，本来不应该在这里的出现的  不好意思 
//        //滑动越慢的情况下，得到的calWidth 和上面的calwidth 相差的值不一样
//
//        //滑动的越快的话，第一个判断会走
//        if (Math.abs(calWidth - mBaseWidth) / mBaseWidth > mMoveThres) {
//            if (calWidth > mBaseWidth) {
//                calWidth = mBaseWidth * (1 + mMoveThres);
//            } else {
//                calWidth = mBaseWidth * (1 - mMoveThres);
//            }
//            //滑动的越慢的话，第二个判断会走  基本上在屏幕上手指基本上没有走动的时候 ，就会走这个方法
//        } else if (Math.abs(calWidth - lastWidth) / lastWidth > mMoveThres) {
//            if (calWidth > lastWidth) {
//                calWidth = lastWidth * (1 + mMoveThres);
//            } else {
//                calWidth = lastWidth * (1 - mMoveThres);
//            }
//        }
        return calWidth;
    }

    /**
     * event.getPressure(); //LCD可以感应出用户的手指压力，当然具体的级别由驱动和物理硬件决定的,我的手机上为1
     *
     * @param motionEvent
     * @return
     */
   /* public MotionElement createMotionElement(MotionEvent motionEvent) {
        MotionElement motionElement = new MotionElement(motionEvent.getX(), motionEvent.getY(),
                motionEvent.getPressure(), motionEvent.getToolType(0));
        return motionElement;
    }*/

    public void clear() {
        mPointList.clear();
        mHWPointList.clear();
    }

    /**
     * 当现在的点和触摸点的位置在一起的时候不用去绘制
     * 但是这里也可以优化，当一直处于onDown事件的时候，其实这个方法一只在走
     *
     * @param canvas
     * @param point
     * @param paint
     */
    // TODO: 2017/10/18  这里可以优化 当一直处于onDown事件的时候，其实这个方法一直在走，优化的点是，处于down事件，这里不需要走
    protected void drawToPoint(Pane canvas, ControllerPoint point) {
        if ((mCurPoint.x == point.x) && (mCurPoint.y == point.y)) {
            return;
        }
        //水彩笔的效果和钢笔的不太一样，交给自己去实现
        doNeetToDo(canvas, point);
    }

    /**
     * 判断笔是否为空 节约性能，每次切换笔的时候就不用重复设置了
     *
     * @return
     */
   /* public boolean isNull() {
        return mPaint == null;
    }*/


    protected void drawNeetToDo(Pane pane) {
        for (int i = 1; i < mHWPointList.size(); i++) {
            ControllerPoint point = mHWPointList.get(i);
            drawToPoint(pane, point);
            mCurPoint = point;
        }
    }


    protected void moveNeetToDo(double curDis) {
        int steps = 1 + (int) curDis / IPenConfig.STEPFACTOR;
        double step = 1.0 / steps;
        for (double t = 0; t < 1.0; t += step) {
            ControllerPoint point = mBezier.getPoint(t);
            mHWPointList.add(point);
        }
    }

    protected void doNeetToDo(Pane canvas, ControllerPoint point) {
        drawLine(canvas, mCurPoint.x, mCurPoint.y, mCurPoint.width, point.x,
                point.y, point.width);
    }

    /**
     * 其实这里才是关键的地方，通过画布画椭圆，每一个点都是一个椭圆，这个椭圆的所有细节，逐渐构建出一个完美的笔尖
     * 和笔锋的效果,我觉得在这里需要大量的测试，其实就对低端手机进行排查，看我们绘制的笔的宽度是多少，绘制多少个椭圆
     * 然后在低端手机上不会那么卡，当然你哪一个N年前的手机给我，那也的卡，只不过需要适中的范围里面
     *
     * @param canvas
     * @param x0
     * @param y0
     * @param w0
     * @param x1
     * @param y1
     * @param w1
     * @param paint
     */
    private void drawLine(Pane canvas, double x0, double y0, double w0, double x1, double y1, double w1) {
        //求两个数字的平方根 x的平方+y的平方在开方记得X的平方+y的平方=1，这就是一个园
        double curDis = Math.hypot(x0 - x1, y0 - y1);
        int steps = 1;
        if (mBaseWidth < 6) {
            steps = 1 + (int) (curDis / 2);
        } else if (mBaseWidth > 60) {
            steps = 1 + (int) (curDis / 4);
        } else {
            steps = 1 + (int) (curDis / 3);
        }
        double deltaX = (x1 - x0) / steps;
        double deltaY = (y1 - y0) / steps;
        double deltaW = (w1 - w0) / steps;
        double x = x0;
        double y = y0;
        double w = w0;

        for (int i = 0; i < steps; i++) {
            //都是用于表示坐标系中的一块矩形区域，并可以对其做一些简单操作
            //精度不一样。Rect是使用int类型作为数值，RectF是使用float类型作为数值。
            //            Rect rect = new Rect();
//            RectF oval = new RectF();
        	Ellipse ellipse = new Ellipse();
        	float centerX=((float) (x - w / 4.0f)+(float) (x + w / 4.0f))/2;
        	float centerY=((float) (y - w / 2.0f)+(float) (y + w / 2.0f))/2;
        	ellipse.setCenterX(centerX);
        	ellipse.setCenterY(centerY);
            ellipse.setRadiusX((Math.abs((float) (x - w / 4.0f)-(float) (x + w / 4.0f)))/2);      	
        	ellipse.setRadiusY(Math.abs(((float) (y - w / 2.0f)-(float) (y + w / 2.0f))/2));
          /*  oval.set((float) (x - w / 4.0f), (float) (y - w / 2.0f), (float) (x + w / 4.0f), (float) (y + w / 2.0f));
            // oval.set((float)(x+w/4.0f), (float)(y+w/4.0f), (float)(x-w/4.0f), (float)(y-w/4.0f));
*/            //最基本的实现，通过点控制线，绘制椭圆
            canvas.getChildren().add(ellipse);
            x += deltaX;
            y += deltaY;
            w += deltaW;
        }
    }

}

/**
 * 
 */
package brush;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.stage.Stage;

/**
 * @author gj
 *
 * 2018年6月6日
 */
public class Test extends Application {

	/* (non-Javadoc)
	 * @see javafx.application.Application#start(javafx.stage.Stage)
	 */
	@Override
	public void start(Stage arg0) throws Exception {
		// TODO Auto-generated method stub
		
		Pane pane = new Pane();
		pane.setPrefSize(800, 900);
		BasePenExtend basePenExtend=new BasePenExtend();
		basePenExtend.setPaint(50);
		basePenExtend.draw(pane);
		pane.setOnMousePressed(e->{
			basePenExtend.onTouchEvent(0, e, pane);
		});
		
		pane.setOnMouseDragged(e->{			
			basePenExtend.onTouchEvent(1, e, pane);
			basePenExtend.draw(pane);
		});
		pane.setOnMouseReleased(e->{
			basePenExtend.onTouchEvent(2, e, pane);
		});
		
		arg0.setScene(new Scene(pane));
		arg0.show();		
	}

	public static void main(String[] args) {
		launch(args);
	}
}