美文网首页
鸿蒙第9课自定义画笔工具(1)

鸿蒙第9课自定义画笔工具(1)

作者: 游私塾白书生 | 来源:发表于2022-05-31 12:03 被阅读0次

1.单独建立一个包,并建立个java类存放画笔工具类

2.代码

// 画笔工具类

//继承所有组件的类  继承画笔的重写接口

public class Drawextends Componentimplements Component.TouchEventListener,Component.DrawTask{

//    绘制参数

//    引出画笔工具

    Paintpaint=new Paint();  //画笔

    PathpaintPath=new Path();// 绘制路径轨迹

//    绘制的过程 也是一个渲染组件,用于绘制的操作

    Pointpoint1=new Point();  //绘制第一个点的位置

    Pointpoint2=new Point();  // 下以一个点的位置

//有参构造

    public Draw(Context context) {

super(context);

//        实列化过程

        paint.setColor(Color.RED);  // 画笔的颜色

        paint.setStrokeWidth(5f);  //画笔的宽度

        paint.setStyle(Paint.Style.STROKE_STYLE);  //样式

        //添加绘制程序

        addDrawTask(this::onDraw);    //::运算符  ,表示调用类的方法

//        设置触碰类的监听

        setTouchEventListener(this::onTouchEvent);

    }

//触碰监听

//    参数一:  接收当前操作的组件

//    参数二:当前参数的触碰事件  按下 拖动 松开

//    按下:记录点的位置

//    拖动:记录点和上一个点的运动轨迹

////    松开:完成  不做任何的操作

    @Override

    public boolean onTouchEvent(Component component, TouchEvent touchEvent) {

//          监听获取到的事件 (按下 拖动 松开)

    switch (touchEvent.getAction()){

//        ____________________  按下

        case  TouchEvent.PRIMARY_POINT_DOWN: {

//            接收点击事件的入口

//            获取按下的位置

            MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex());

//            根据位置获取绘制路径

            paintPath.moveTo(point.getX(), point.getY());

//            position  是一个数组 0 角标存X  1角标存Y

            point1.position[0] = point.getX();

            point1.position[1] = point.getY();

            point2.position[0] = point.getX();

            point2.position[1] = point.getY();

return true;

        }

//          __________________  拖动

        case TouchEvent.POINT_MOVE: {

//            接收点击事件的入口

//            获取按下的位置

            MmiPoint point = touchEvent.getPointerPosition(touchEvent.getIndex());

//                锯齿偏移量  高数公式  模拟两个位置之间最近的距离链接

            Point curPoint=new Point((point.getX()+point1.position[0])/2,(point.getY()+point1.position[1])/2);

//            使用备赛尔曲线进行绘制

    paintPath.cubicTo(point1,point2,curPoint);

//        启始点

            point1.position[0]=point.getX();

            point1.position[1]=point.getY();

//  终止点

            point2.position[0]=curPoint.position[0];

            point2.position[1]=curPoint.position[1];

//            重新绘制UI

        invalidate();

break;

        }

//        ____________________________  松开

        case TouchEvent.PRIMARY_POINT_UP: {

break;

        }

}

return false;

    }

//绘制方法

//    参数1:绘制组件  参数2:被绘制的画板

    @Override

    public void onDraw(Component component, Canvas canvas) {

//        导入:  paint  //画笔

//        paintPath// 绘制路径轨迹

            canvas.drawPath(paintPath,paint);

    }

}

3.主页面代码

// 布局对象

        DirectionalLayout dl=new DirectionalLayout(this);

//        获取布局方式

        DirectionalLayout.LayoutConfig config=new DirectionalLayout.LayoutConfig(DirectionalLayout.

LayoutConfig.MATCH_PARENT,DirectionalLayout.LayoutConfig.MATCH_CONTENT);

//        给布局对象设置布局方式

        dl.setLayoutConfig(config);

        Draw draw=new Draw(this);

        draw.setLayoutConfig(config);

//        设置画板的背景颜色

        ShapeElement element=new ShapeElement();

        element.setRgbColor(new RgbColor(0,0,0));

        draw.setBackground(element);

        dl.addComponent(draw);

        super.setUIContent(dl);

4.效果

xiao

相关文章

网友评论

      本文标题:鸿蒙第9课自定义画笔工具(1)

      本文链接:https://www.haomeiwen.com/subject/kntyprtx.html