java游戏主角用毛笔_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 mHWPointList = new ArrayList<>();

public ArrayList mPointList = new ArrayList();

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

}

}