仿毛笔字的自定义绘图View

已于 2022-08-10 10:24:20 修改
阅读量144 收藏 2
点赞数
分类专栏： android 自定义控件 文章标签： 贝塞尔曲线
于 2020-12-30 14:43:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43184171/article/details/111989321
版权

可以设置宽度


public class CanvasViewPlus extends View {
    private static String TAG = "TAG";
    float fOldPointX = -1f;
    float fOldPointY = -1f;
    float fNewPointX = -1f;
    float fNewPointY = -1f;
    float fOldWidth = 30, maxWidth = 50, minWidth = 10, changeWidth = 1, finalWidth = 30;
    float fNewWidth;
    float fSpecialPointX;
    float fSpecialPointY;
    long lastDownTime, thisEventTime;
    //    int alpha = 255;改变透明度会整条改变
    Point[] oldPoints;
    //Point[] orderedPoints;   //对应索引分别为最上，最右，最下，最左
    boolean isMoving = false, isPressed = false;
    Path mPath = new Path();
    Paint mPaint = new Paint();
    Date date;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawPath(mPath, mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction() & ACTION_MASK) {
            case ACTION_DOWN:
                fOldPointX = event.getX();
                fOldPointY = event.getY();
                lastDownTime = getNowDate();
                break;
            case ACTION_MOVE:
                fNewPointX = event.getX();
                fNewPointY = event.getY();
                thisEventTime = getNowDate();
                fNewWidth = fOldWidth;
                if (fOldPointX == fNewPointX && fNewPointY == fNewPointY) {
                    break;
                }
                float k = 0;    //斜率
                boolean isVaidedByK = true;
                if (fOldPointX == fNewPointX) {
                    isVaidedByK = false;
                } else {
                    k = (fOldPointY - fNewPointY) / (fOldPointX - fNewPointX);
                }
                mPath.moveTo(fOldPointX, fOldPointY);
                //判断长按
                if (isLongPressed(fOldPointX, fOldPointY, fNewPointX, fNewPointY, lastDownTime, thisEventTime, 200)) {//200毫秒判断
                    if (fNewWidth < maxWidth) {//最粗30
                        fNewWidth = fNewWidth + changeWidth;
                    }
                    if (!isMoving) {
                        isPressed = true;
                    }
//                    if (alpha > 255) {
//                        alpha = alpha + 5;
//                    }
                } else {
                    if (fNewWidth > minWidth) {//最细10
                        fNewWidth = fNewWidth - changeWidth;
                    }
//                    if (alpha <= 255) {
//                        alpha = alpha - 5;
//                    }
                    //move获取到第一个后画出开头的笔锋
                    if (!isMoving) {
                        isMoving = true;    //标记为正在触摸中
                        oldPoints = calculatePoint(fOldPointX, fOldPointY, fOldWidth, k, isVaidedByK);
                        calculateStroke(fNewPointX, fNewPointY, fOldPointX, fOldPointY, fOldWidth, 4);
                    }
                    isPressed = false;
                }
//                mPaint.setAlpha(alpha);
                if (isPressed) {
                    mPath.addCircle(fOldPointX, fOldPointY, fOldWidth, CW);
                } else {
                    isPressed = false;
                    Point[] newPoints = calculatePoint(fNewPointX, fNewPointY, fNewWidth, k, isVaidedByK);
                    calculateDrawRect(oldPoints, newPoints);
                    oldPoints = newPoints;
                }
                //更新数值
                fSpecialPointX = fOldPointX;
                fSpecialPointY = fOldPointY;
                fOldPointX = fNewPointX;
                fOldPointY = fNewPointY;
                fOldWidth = fNewWidth;
                invalidate();
                break;
            case ACTION_UP:
                if (isMoving == true) {
                    isMoving = false;
                    calculateStroke(fSpecialPointX, fSpecialPointY, fOldPointX, fOldPointY, fOldWidth, 4);
                }
                isPressed = false;
                invalidate();
                fOldWidth = finalWidth;
                break;
        }
        return true;
    }

    //获取当前时间
    public long getNowDate() {
        date = new Date();
        return date.getTime();
    }

    /**
     * 判断是否有长按动作发生
     *
     * @param lastX         按下时X坐标
     * @param lastY         按下时Y坐标
     * @param thisX         移动时X坐标
     * @param thisY         移动时Y坐标
     * @param lastDownTime  按下时间
     * @param thisEventTime 移动时间
     * @param longPressTime 判断长按时间的阀值
     */
    private boolean isLongPressed(float lastX, float lastY,
                                  float thisX, float thisY,
                                  long lastDownTime, long thisEventTime,
                                  long longPressTime) {
        float offsetX = Math.abs(thisX - lastX);
        float offsetY = Math.abs(thisY - lastY);
        long intervalTime = thisEventTime - lastDownTime;
        if (offsetX <= 10 && offsetY <= 10 && intervalTime >= longPressTime) {
            return true;
        }
        return false;
    }

    //    过圆心的直线必有两点与圆相交
    Point[] calculatePoint(double x0, double y0, double r, double k, boolean isValidByK) {
        double b, ar, br, cr, x1, y1, x2, y2;
        if (isValidByK) {

            if (k == 0) {

                ar = 1;
                br = -2 * y0;
                cr = Math.pow(y0, 2) - Math.pow(r, 2);

                x2 = x0;
                //y2 = ((-br - Math.sqrt(Math.pow(br, 2) - 4 * ar * cr)) / 2 / ar);
                y2 = y0 + r;
                x1 = x0;
                //y1 = ((-br + Math.sqrt(Math.pow(br, 2) - 4 * ar * cr)) / 2 / ar);
                y1 = y0 - r;

            } else {
                b = y0 + x0 / k;
                ar = 1 + 1 / Math.pow(k, 2);
                br = -(2 * (b - y0) / k + 2 * x0);
                cr = (Math.pow(x0, 2) + Math.pow(b - y0, 2) - Math.pow(r, 2));

                x1 = ((-br - Math.sqrt(Math.pow(br, 2) - 4 * ar * cr)) / 2 / ar);
                y1 = -x1 / k + b;

                x2 = ((-br + Math.sqrt(Math.pow(br, 2) - 4 * ar * cr)) / 2 / ar);
                y2 = -x2 / k + b;
            }

        } else {
            //K是不存在的
            ar = 1;
            br = -2 * x0;
            cr = Math.pow(x0, 2) - Math.pow(r, 2);

            x1 = ((-br - Math.sqrt(Math.pow(br, 2) - 4 * ar * cr)) / 2 / ar);
            y1 = y0;
            x2 = ((-br + Math.sqrt(Math.pow(br, 2) - 4 * ar * cr)) / 2 / ar);
            y2 = y0;
        }
        return new Point[]{
                new Point(x1, y1),
                new Point(x2, y2)};

    }

    /*
     * 连成四边形,保证四个点不交叉
     * */
    void calculateDrawRect(Point[] prevPoints, Point[] nextPoints) {
        //连成三角形
        lineToTriangle(prevPoints[0], prevPoints[1], nextPoints[0]);
        lineToTriangle(prevPoints[0], prevPoints[1], nextPoints[1]);
        lineToTriangle(prevPoints[0], nextPoints[0], nextPoints[1]);
        lineToTriangle(prevPoints[1], nextPoints[0], nextPoints[1]);
    }

    /*
     * 把三个点连成三角形，以顺时针的顺序
     * */
    void lineToTriangle(Point p0, Point p1, Point p2) {
        //找出最高点,放在第一个，如果有一样高的选靠左的
        Point[] points = new Point[]{p0, p1, p2};
        for (int i = 0; i < points.length; i++) {
            if (points[0].y > points[i].y || (points[0].y == points[i].y && points[0].x > points[i].x)) {
                Point tmp = points[i];
                points[i] = points[0];
                points[0] = tmp;
            }
        }
        mPath.moveTo((float) points[0].x, (float) points[0].y);
        //判断斜率是否存在，存在，小的先连接，不存在，大于0的先连接
        Double k1 = points[0].x == points[1].x ? NaN : (points[0].y - points[1].y) / (points[0].x - points[1].x);
        Double k2 = points[0].x == points[2].x ? NaN : (points[0].y - points[2].y) / (points[0].x - points[2].x);
        //不可能都不存在，10种情况
        if (k1.equals(NaN)) {
            if (k2 >= 0) {
                mPath.lineTo((float) points[2].x, (float) points[2].y);
                mPath.lineTo((float) points[1].x, (float) points[1].y);
            } else {
                mPath.lineTo((float) points[1].x, (float) points[1].y);
                mPath.lineTo((float) points[2].x, (float) points[2].y);
            }
        } else if (k2.equals(NaN)) {
            if (k1 >= 0) {
                mPath.lineTo((float) points[1].x, (float) points[1].y);
                mPath.lineTo((float) points[2].x, (float) points[2].y);
            } else {
                mPath.lineTo((float) points[2].x, (float) points[2].y);
                mPath.lineTo((float) points[1].x, (float) points[1].y);
            }
        } else if (k1 >= 0 && k2 >= 0 && k1 > k2) {
            mPath.lineTo((float) points[2].x, (float) points[2].y);
            mPath.lineTo((float) points[1].x, (float) points[1].y);
        } else if (k1 >= 0 && k2 >= 0 && k1 < k2) {
            mPath.lineTo((float) points[1].x, (float) points[1].y);
            mPath.lineTo((float) points[2].x, (float) points[2].y);
        } else if (k1 >= 0 && k2 < 0) {
            mPath.lineTo((float) points[1].x, (float) points[1].y);
            mPath.lineTo((float) points[2].x, (float) points[2].y);
        } else if (k1 < 0 && k2 >= 0) {
            mPath.lineTo((float) points[2].x, (float) points[2].y);
            mPath.lineTo((float) points[1].x, (float) points[1].y);
        } else if (k1 < 0 && k2 < 0 && k1 < k2) {
            mPath.lineTo((float) points[1].x, (float) points[1].y);
            mPath.lineTo((float) points[2].x, (float) points[2].y);
        } else if (k1 < 0 && k2 < 0 && k1 > k2) {
            mPath.lineTo((float) points[2].x, (float) points[2].y);
            mPath.lineTo((float) points[1].x, (float) points[1].y);
        }
        //最后连回去
        mPath.lineTo((float) points[0].x, (float) points[0].y);
    }

    /*
     *direction: 1-正序连线，0-反序连线
     * */
    void lineToByDirection(Point[] prevBothPoints, Point[] nextBothPoints, int direction) {
        if (direction == 1) {
            mPath.moveTo((float) prevBothPoints[0].x, (float) prevBothPoints[0].y);
            mPath.lineTo((float) prevBothPoints[1].x, (float) prevBothPoints[1].y);
            mPath.lineTo((float) nextBothPoints[1].x, (float) nextBothPoints[1].y);
            mPath.lineTo((float) nextBothPoints[0].x, (float) nextBothPoints[0].y);
            mPath.lineTo((float) prevBothPoints[0].x, (float) prevBothPoints[0].y);
        } else {
            mPath.moveTo((float) prevBothPoints[0].x, (float) prevBothPoints[0].y);
            mPath.lineTo((float) prevBothPoints[1].x, (float) prevBothPoints[1].y);
            mPath.lineTo((float) nextBothPoints[0].x, (float) nextBothPoints[0].y);
            mPath.lineTo((float) nextBothPoints[1].x, (float) nextBothPoints[1].y);
            mPath.lineTo((float) prevBothPoints[0].x, (float) prevBothPoints[0].y);
        }
    }

    /*
     * 修整笔画的开头和结尾(使两端突出)，方向是(x0,y0)->(x1,y1)，
     * 突出的程度取决于两点之间的距离和第一个点的压力值或接触面积
     * （与两点间距离等长）version 1
     * */
    void calculateStroke(float x0, float y0, float x1, float y1, float width0, int multiple) {
        //两点的斜率
        Float k;
        if (oldPoints[0].x == oldPoints[1].x) {
            k = Float.NaN;
        } else {
            k = (float) ((oldPoints[0].y - oldPoints[1].y) / (oldPoints[0].x - oldPoints[1].x));
        }
        if (k.equals(Float.NaN)) {
            width0 *= multiple;
            mPath.moveTo((float) oldPoints[0].x, (float) oldPoints[0].y);
//            mPath.addCircle((float) oldPoints[0].x, (float) oldPoints[0].y, 10, CW);
//            mPath.addCircle((float) oldPoints[1].x, (float) oldPoints[1].y, 15, CW);
            if (x0 > x1) {
                //向左的
                //先线
                mPath.lineTo((float) oldPoints[1].x, (float) oldPoints[1].y);
                mPath.quadTo((float) (oldPoints[0].x - width0), (float) oldPoints[0].y,
                        (float) oldPoints[0].x, (float) oldPoints[0].y);
                //mPath.addCircle((float) (oldPoints[0].x - width0), (float) oldPoints[0].y, 10, CW);
            } else {
                //向右的
                //先圆弧
                mPath.quadTo((float) (oldPoints[1].x + width0), (float) oldPoints[1].y,
                        (float) oldPoints[1].x, (float) oldPoints[1].y);
                mPath.lineTo((float) oldPoints[0].x, (float) oldPoints[0].y);
                //mPath.addCircle((float) (oldPoints[1].x + width0), (float) oldPoints[1].y, 10, CW);
            }
        } else if (k == 0) {
            width0 *= multiple;
            //k == 0
            mPath.moveTo((float) oldPoints[0].x, (float) oldPoints[0].y);
            if (y0 > y1) {
                //向上的
                //先圆弧
                mPath.quadTo((float) oldPoints[0].x, (float) (oldPoints[0].y - width0),
                        (float) oldPoints[1].x, (float) oldPoints[1].y);
                mPath.lineTo((float) oldPoints[0].x, (float) oldPoints[0].y);
                //mPath.addCircle((float) oldPoints[0].x, (float) (oldPoints[0].y - width0), 15, CW);

            } else {
                //向下的
                //先线
                mPath.lineTo((float) oldPoints[1].x, (float) oldPoints[1].y);
                mPath.quadTo((float) oldPoints[1].x, (float) (oldPoints[1].y + width0),
                        (float) oldPoints[0].x, (float) oldPoints[0].y);
                //mPath.addCircle((float) oldPoints[1].x, (float) (oldPoints[1].y + width0), 15, CW);
            }
        } else {
            //直线一般式求系数
            double a = y1 - y0;
            double b = x0 - x1;
            double c = x1 * y0 - x0 * y1;
            double distanceY = Math.abs(c / b);     //纵坐标截距
            double distanceX = Math.abs(c / a);     //横坐标截距
            //两点间距离
            //double distancePoint = Math.sqrt(Math.pow(oldPoints[0].x - oldPoints[1].x, 2) +
//                    Math.pow(oldPoints[0].y - oldPoints[1].y, 2));
            //偏移
            double offsetX = (width0 * distanceX / Math.sqrt(distanceX * distanceX + distanceY * distanceY));
            double offsetY = (width0 * distanceY / Math.sqrt(distanceX * distanceX + distanceY * distanceY));
//        distancePoint *= 2;
            offsetX *= multiple;
            offsetY *= multiple;
            if (x0 > x1) {
                //先划线
                if (oldPoints[0].y < oldPoints[1].y) {
                    //已x0为原点，左下
                    mPath.moveTo((float) oldPoints[0].x, (float) oldPoints[0].y);
                    mPath.lineTo((float) oldPoints[1].x, (float) oldPoints[1].y);
                    mPath.quadTo((float) (oldPoints[0].x - offsetX), (float) (oldPoints[0].y + offsetY),
                            (float) oldPoints[0].x, (float) oldPoints[0].y);
                    //mPath.addCircle((float) (oldPoints[0].x - offsetX), (float) (oldPoints[0].y + offsetY), 10, CW);
                } else {
                    //已x0为原点，左上
                    mPath.moveTo((float) oldPoints[1].x, (float) oldPoints[1].y);
                    mPath.lineTo((float) oldPoints[0].x, (float) oldPoints[0].y);
                    mPath.quadTo((float) (oldPoints[0].x - offsetX), (float) (oldPoints[0].y - offsetY),
                            (float) oldPoints[1].x, (float) oldPoints[1].y);
                    //mPath.addCircle((float) (oldPoints[0].x - offsetX), (float) (oldPoints[0].y - offsetY), 10, CW);
                }
            } else {
                //先圆弧
                if (oldPoints[0].y < oldPoints[1].y) {
                    //已x0为原点，右上
                    mPath.moveTo((float) oldPoints[0].x, (float) oldPoints[0].y);
                    mPath.quadTo((float) (oldPoints[1].x + offsetX), (float) (oldPoints[1].y - offsetY),
                            (float) oldPoints[1].x, (float) oldPoints[1].y);
                    mPath.lineTo((float) oldPoints[0].x, (float) oldPoints[0].y);
                    //mPath.addCircle((float) (oldPoints[1].x + offsetX), (float) (oldPoints[1].y - offsetY), 10, CW);

                } else {
                    //已x0为原点，右下
                    mPath.moveTo((float) oldPoints[1].x, (float) oldPoints[1].y);
                    mPath.quadTo((float) (oldPoints[1].x + offsetX), (float) (oldPoints[1].y + offsetY),
                            (float) oldPoints[0].x, (float) oldPoints[0].y);
                    mPath.lineTo((float) oldPoints[1].x, (float) oldPoints[1].y);
                    //mPath.addCircle((float) (oldPoints[1].x + offsetX), (float) (oldPoints[1].y + offsetY), 10, CW);
                }
            }
        }
    }

    public void reset() {
        mPath.reset();
    }


    /*
     * 通过f 计算出点的“宽度”（此刻需要渲染的面积的大小）
     */
    float calculateWidth(float f) {
//        f = 1.0f;
        f *= 20;
        if (isMoving) {
            f = speed(f);
            f -= (f - fOldWidth) / 2;
        }
        return f;
    }

    float speed(float f) {
        float distance = (float) Math.sqrt(Math.pow(fOldPointX - fNewPointX, 2) + Math.pow(fOldPointY - fNewPointY, 2));
        float limit = 150;
//        Log.d("suqin:distance", "" + distance);
        //以一半的f为缩减量，
        if (distance <= limit) {
            return f - f * distance / 2 / limit;
        } else {
            return f / 2;
        }
    }

    public CanvasViewPlus(Context context) {
        super(context);
    }

    public CanvasViewPlus(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mPaint.setColor(Color.BLACK);
        mPaint.setAntiAlias(true);  //抗锯齿
//        mPath.setFillType(Path.FillType.WINDING);   //填充模式
//        mPaint.setStyle(Paint.Style.STROKE);
//        mPaint.setStrokeWidth(1);
    }

    public CanvasViewPlus(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    public CanvasViewPlus(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    class Point {
        double x;
        double y;

        Point(double x, double y) {
            this.x = x;
            this.y = y;
        }
    }

    public void setfOldWidth(float fOldWidth) {
        this.fOldWidth = fOldWidth;
        finalWidth = fOldWidth;
        //设置±10档粗细变化，默认最大最小为设置大小的*2或者/2
        changeWidth = fOldWidth / 10;
        maxWidth = fOldWidth * 2;
        minWidth = fOldWidth / 2;
    }
}
紫薯千层糕
关注
专栏目录
html 毛笔书写效果,利用canvas实现毛笔字帖（三）
weixin_42189774的博客
06-04 1150
上接javascript二、 根据功能需要完善代码3. 第3部分controller.js这一部分的功能就是要修改毛笔的颜色，还有清空画布。功能简单，我们一起向下讲。一开始依然是initcontroller.jsvar controller = {canvas: null,//html中的canvas对象，主要标签context: null, //canvas对象获取的context，用于绘图in...
canvas 手写毛笔字效果
热门推荐
jslang的专栏
03-03 1万+
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> canvas 手写毛笔字效果 </ti...
毛笔字签名软件、仿毛笔签名
11-22
这是一个仿毛笔的案例，应用在签名台上，可以进行毛笔字模拟签名。用于展厅的签名，可以保持书写的图片,可以写出逼真毛笔字效果来
html5笔迹画图,html5绘图工具canvas模拟笔迹绘画特效
weixin_36111764的博客
06-15 617
特效描述：html5绘图工具 canvas 模拟笔迹 绘画特效。html5绘图工具使用鼠标在网页上进行写字，canvas绘画模拟笔迹特效代码结构1. HTML代码sorry!//定义获取id 元素的函数function $(id){return document.getElementById(id);}//定义了两个数组元素。用于记录鼠标的X Y 轴的位置var clickX = new Arra...
html 毛笔书写效果,canvas 手写毛笔字效果
weixin_28454475的博客
06-04 1129
canvas 手写毛笔字效果 #canvasId {background-color: #FFFFcc;}function Handwriting(id) {this.canvas = document.getElementById(id);this.ctx = this.canvas.getContext("2d");this.ctx.fillStyle = "rgba(0,0,0,0.25)...
微信小程序—写字板、手写签名（高仿毛笔效果）让汉字引领世界
WeiHan_Seven的博客
01-08 6192
计算机的发明让手写受到毁灭性打击，但手写的经典不能埋没，这是一款手写签名工具，根据手写速度计算笔宽，很有毛笔的风韵，请拿去使用。
电子签名（仿毛笔字）
11-05
本文将深入探讨“电子签名（仿毛笔字）”这一主题，结合使用ActionScript 3（AS3）实现的系统，来阐述相关的知识点。 首先，电子签名是一种在数字环境中验证身份的方法，它等同于传统的手写签名，但具有更高的安全...
行业文档-设计装置-练毛笔字专用的吊瓶结构持续供墨型仿毛笔.zip
08-27
在本压缩包“行业文档-设计装置-练毛笔字专用的吊瓶结构持续供墨型仿毛笔.zip”中，包含的主要内容是关于一种创新的书法练习工具——练毛笔字专用的吊瓶结构持续供墨型仿毛笔的设计方案。这个装置旨在为书法爱好者...
JS + CONVAS 做的毛笔字动画
09-12
JS + CONVAS 做的毛笔字动画 鼠标点击时间越长毛笔字效果越浓
毛笔字算法 笔锋算法 平滑算法 C# 源码 可编译
07-12
在IT领域，尤其是在图形处理和数字艺术中，模拟传统艺术效果，如毛笔字，是一项技术挑战。本项目聚焦于“毛笔字算法”、“笔锋算法”和“平滑算法”，并提供了C#语言的源码实现，可直接编译运行。下面将详细解析这些...
HTML5 canvas毛笔写字画板
05-01
HTML5 canvas毛笔写字画板，有选择笔画、清空画板功能。
毛笔刷画板Canvas特效
06-24
毛笔刷画板Canvas特效是一款毛笔笔刷绘画写字动画特效。
使用WPF的自定义InkCanvas实现毛笔效果
12-04
wpf模拟毛笔写字的，研究了一个多星期，发现这东西没我原来想的那么 简单， 其实很复杂的，很多学校毕业生论文都是研究这个的，网上的资源也比较少， 有效果的效率又不高，效率高的没效果 自己弄了个简单的，先放出来看看，
模拟毛笔功能
01-17
android实现毛笔效果，可以模拟毛笔字的感觉，体验毛笔涂鸦，补充代码，效果有点卡
HTML5 Canvas在线书法练字代码.zip
07-04
HTML5 Canvas在线书法练字代码是一款简单的在线书法文字练习特效。
毛笔效果简单思路
::: 移动互联网时代开发者 :::
02-22 1万+
<br /> <br /><br />任何画线的程序，都是先在界面上获取若干不连续的点，然后将这些点连成线。<br /><br /><br />一些常见的笔型比较好实现，比如说铅笔、钢笔等等，这类笔型的线条的宽度和线条的颜色是固定的，只需要将点连接成固定颜色和固定宽度的线即可。<br /><br /><br />毛笔是比较特殊的笔型，要实现好毛笔效果，有几点比较特殊，需要考虑。<br />1. 同一笔画内，线条各处的粗细不同。<br />2. 同一笔画内，线条各处的透明度不同。<br />3. 有笔锋效果。
uniapp canvas 手写毛笔字效果 根据触屏时长改变笔画粗细
weixin_42244510的博客
08-20 2160
<template> <view @touchmove.stop.prevent="moveHandle"> <view class="signature" v-show="showCanvas"> <canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend" ref="canvas"&.
h5 canvas实现移动端手写签名
chueluo0880的博客
06-20 2364
signatrue_pad JS说明 Demo地址 1. 签名页面禁止页面滚动 componentWillMount(){ //清空上一个页面的滚动值 $('body,html').scrollTop(0); //这是当前滚动的页面滚动条位置 ...
DobotMagician实验：毛笔字与ROS机器人综合应用
本篇文档主要介绍了控制工程专业的硕士学位研究生在实验课程中进行的一系列与智能机器人相关的实验，包括DobotMagician机器人在写毛笔字和搬运积木任务中的应用，以及ROS（Robot Operating System）操作系统的使用。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值