`
xuanzhui
  • 浏览: 201461 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

通过Paint和Canvas绘制动态的打勾和打叉效果

阅读更多

效果

最终效果

 

几个要点:

1. 坐标系以左上角为原点,横X竖Y

 

2. 笔刷Paint

 

Paint paint = new Paint();

//设置画笔颜色
paint.setColor(getResources().getColor(R.color.arc_fail_color));

//设置画笔的宽度
paint.setStrokeWidth(lineThick);

//设置图形为空心
paint.setStyle(Paint.Style.STROKE);

//消除锯齿
paint.setAntiAlias(true);

 

 

3. 绘制直线

 

/**   Canvas
 * Draw a line segment with the specified start and stop x,y coordinates,
 * using the specified paint.
 *
 * @param startX The x-coordinate of the start point of the line
 * @param startY The y-coordinate of the start point of the line
 * @param paint  The paint used to draw the line
 */
public void drawLine(float startX, float startY, float stopX, float stopY, Paint paint)

 

 

 4. 绘制圆弧

 

/**
 * <p>Draw the specified arc, which will be scaled to fit inside the
 * specified oval.</p>
 *
 * <p>If the start angle is negative or >= 360, the start angle is treated
 * as start angle modulo 360.</p>
 *
 * <p>If the sweep angle is >= 360, then the oval is drawn
 * completely. Note that this differs slightly from SkPath::arcTo, which
 * treats the sweep angle modulo 360. If the sweep angle is negative,
 * the sweep angle is treated as sweep angle modulo 360</p>
 *
 * <p>The arc is drawn clockwise. An angle of 0 degrees correspond to the
 * geometric angle of 0 degrees (3 o'clock on a watch.)</p>
 *
 * @param oval       The bounds of oval used to define the shape and size
 *                   of the arc
 * @param startAngle Starting angle (in degrees) where the arc begins
 * @param sweepAngle Sweep angle (in degrees) measured clockwise
 * @param useCenter If true, include the center of the oval in the arc, and
                    close it if it is being stroked. This will draw a wedge
 * @param paint      The paint used to draw the arc
 */
public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

 注:

以时钟三点为0度;

完整角度以360°来计算;

oval限定绘图区域

startAngle为起始角度;

sweepAngle表示划过的角度,如果为负值则逆时针画

useCenter如果为true则画出扇形效果,否则只有一个圆弧

 

RectF的初始化

 

/**
 * Create a new rectangle with the specified coordinates. Note: no range
 * checking is performed, so the caller must ensure that left <= right and
 * top <= bottom.
 *
 * @param left   The X coordinate of the left side of the rectangle
 * @param top    The Y coordinate of the top of the rectangle
 * @param right  The X coordinate of the right side of the rectangle
 * @param bottom The Y coordinate of the bottom of the rectangle
 */
public RectF(float left, float top, float right, float bottom)

 

 

5. 获取用户在xml中自定义的宽度值 layout_width

 

public DrawCrossMarkView(Context context, AttributeSet attrs) {
    super(context, attrs);

    Pattern p = Pattern.compile("\\d*");

    Matcher m = p.matcher(attrs.getAttributeValue("http://schemas.android.com/apk/res/android", "layout_width"));

    if (m.find()) {
        totalWidth = Float.valueOf(m.group());
    }

    init();
} 

 

注:

在构造函数中通过getWidth来获取宽度得到的结果往往是0,在执行到onDraw的时候,控件大小才划定;

本例中默认用户以dp为单位设置layout_width。

 

6. 重写onDraw方法,在没有绘制完成前,通过postInvalidateDelayed定义重绘间隔,每一次重绘,之前绘制的图案都会被清除

//绘制
@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    Log.w("check mark", "drawing... # progress=" + progress);

    if (progress < 100)
        progress+=step;

    //根据进度画圆弧
    canvas.drawArc(rectF, 235, -360 * progress / 100, false, paint);

    //先等圆弧画完,画叉
    if (progress >= 100) {
        if (line1X < maxLineIncrement) {
            line1X+=step;
            line1Y+=step;
        }

        //画第一根线
        canvas.drawLine(line1StartX, lineStartY, line1StartX - line1X, lineStartY + line1Y, paint);

        if (line1X >= maxLineIncrement) {

            line2X+=step;
            line2Y+=step;

            //画第二根线
            canvas.drawLine(line2StartX, lineStartY, line2StartX + line2X, lineStartY + line2Y, paint);
        }
    }

    //每隔6毫秒界面刷新
    if (line2X < maxLineIncrement)
        postInvalidateDelayed(6);
}

 

7. 调用

在布局文件中添加控件

<com.xuanzhui.animations.view.DrawCrossMarkView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="50dp"/>

 在color总定义颜色

<color name="arc_fail_color">#D93549</color>

 

8. 完整代码见 https://github.com/xuanzhui/Animations

 

 

 

  • 大小: 5.9 KB
0
1
分享到:
评论

相关推荐

    canvas绘制动态心电图

    Canvas是一个基于矢量图形的画布,通过JavaScript API提供了一系列方法,如`fillRect`、`strokeRect`、`beginPath`、`moveTo`、`lineTo`等,用于绘制各种形状和线条。对于动态心电图来说,我们需要频繁地清除画布(`...

    Html5_Canvas绘制动态心电图

    3. **绘制线条**:在每次循环中,`clearRect()`方法用于清除上一帧的线条,然后根据解析出的数据在Canvas上用`moveTo()`和`lineTo()`定义新的路径,最后用`stroke()`描绘出来。 `Style.css`文件可能包含了页面布局...

    android利用Paint在Canvas上实现竖排写字

    - 可以通过设置Paint的`paint.setTextAlign(Paint.Align.RIGHT)`使文本右对齐,再配合`canvas.translate()`方法改变画布的坐标原点,使得每次绘制文本时都会向左移动一定的距离,从而达到竖排的效果。 4. **步骤...

    自定义view(Paint和Canvas)

    在Android开发中,自定义View是一项重要的技能,它允许开发者根据需求创建独特的用户界面...通过设置Paint的各种属性和利用Canvas的方法,开发者可以绘制出各种形状、文本和图像,构建出独特且具有吸引力的用户界面。

    HTML5_canvas绘制动态树视图 类似结构图.rar

    在Canvas上绘制动态树视图,首先需要了解的基本概念有: 1. **Canvas元素**:HTML5中的`&lt;canvas&gt;`标签提供了一个可编程的2D渲染上下文,我们可以通过JavaScript对其进行操作。 2. **Canvas API**:这是一个图形...

    android源代码-canvas绘制动态折线图

    我们可以在`Path`上使用`moveTo()`和`lineTo()`方法分别指定线的起始点和终点,然后在`onDraw()`中调用`canvas.drawPath(path, paint)`来绘制整个路径。为了创建动态效果,可以在`Runnable`或者`Handler`中定期更新...

    canvas绘制风场效果

    总结来说,`canvas`绘制风场效果涉及数据解析、坐标转换、图形绘制、动画实现和服务器部署等多个环节。这是一项综合性的技术实践,能够帮助气象学家、开发者和公众更好地理解和呈现风场信息。通过不断优化和扩展,...

    Android -自定义view-Paint和Canvas.rar

    例如,你可以创建一个自定义的进度条,使用Canvas绘制背景和进度条,通过改变Paint的颜色和位置来显示进度。或者创建一个可交互的图表视图,根据数据动态更新Canvas上的图形。 通过深入理解和实践Paint和Canvas的...

    Paint和Canvas使用总结

    在实际应用中,`Paint`和`Canvas`常常结合使用,先通过`Paint`设置好绘制样式,然后在`Canvas`上进行绘制操作。例如,你可以创建一个`Bitmap`,然后在它的`Canvas`上画一个红色的圆: ```java Bitmap bitmap = ...

    HTML5 canvas仿屏保动态管道

    HTML5 canvas 是一种在网页上绘制图形的API,它允许开发者通过JavaScript动态创建和修改二维图形,从而实现丰富的视觉效果。在这个"HTML5 canvas仿屏保动态管道"项目中,我们利用canvas元素来模仿经典的Windows屏保...

    基于openlayers和canvas绘制海量数据的实现

    总之,"基于openlayers和canvas绘制海量数据的实现"是一个高效处理和展示地理信息的技术方案,它结合了OpenLayers的灵活性和Canvas的高性能渲染能力,为开发者提供了强大的工具来应对大数据挑战。通过理解和掌握这些...

    vue+canvas绘制图形

    总之,"vue+canvas绘制图形"项目展示了如何利用Vue的组件化思想和Canvas的绘图能力,创建出具有动态效果和用户交互的前端应用。通过学习和实践这种方式,开发者可以提高自己的前端技能,为网页带来更丰富的视觉体验...

    ECG html canvas绘制心电图

    ECG html canvas绘制心电图

    使用canvas绘制的动态实时时钟.html

    使用canvas绘制的实时时钟

    canvas绘制音频波形-纯js自写

    总结来说,通过HTML5的Canvas和Web Audio API,我们可以实现音频波形的动态绘制。这不仅有助于可视化音频,还可以用于音频编辑、分析等多种用途。在实际项目中,可以根据需求进一步优化和扩展这个基础示例。

    canvas 绘制会动的钟表

    这个例子展示了如何使用Canvas的基本绘图操作,如绘制线条和旋转坐标系,以及如何利用Android的View机制来实现动态效果。理解并熟练掌握这些概念对于任何Android开发者来说都是非常重要的,尤其是在创建自定义UI组件...

    使用Canvas类绘制android机器人

    在Android开发中,Canvas是图形绘制的核心类,它允许开发者在Bitmap或者其他可绘图对象上进行画图操作。本文将深入探讨如何利用...在实践中不断探索和学习,你将能够熟练地运用Canvas绘制出更多富有创意的图形和动画。

    html5 canvas绘制管道里跳动小球动画特效

    HTML5 Canvas是Web开发中的一个强大工具,它允许开发者在网页上进行动态图形绘制,创造出丰富的交互式2D图形和动画。"html5 canvas绘制管道里跳动小球动画特效"是一个利用Canvas API实现的典型应用场景,旨在创建一...

    使用canvas绘制钟表

    在HTML5中,Canvas元素提供...通过深入理解和实践,你可以利用canvas实现更多复杂的2D图形和动画效果。在实际项目中,你可能还需要考虑性能优化,比如减少不必要的重绘或者使用requestAnimationFrame替代setInterval。

    网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)

    网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效。(抖音资料)网页动画素材 canvas绘制四边形棱镜,酷炫的粒子飞出动画特效...

Global site tag (gtag.js) - Google Analytics