SurfaceView绘制图形

一、什么是SurfaceView

官方文档：

SurfaceView是视图(View)的继承类，这个视图里内嵌了一个专门用于绘制的Surface。你可以控制这个Surface的格式和尺寸。Surfaceview控制这个Surface的绘制位置。
        surface是纵深排序(Z-ordered)的，这表明它总在自己所在窗口的后面。surfaceview提供了一个可见区域，只有在这个可见区域内 的surface部分内容才可见，可见区域外的部分不可见。surface的排版显示受到视图层级关系的影响，它的兄弟视图结点会在顶端显示。这意味者 surface的内容会被它的兄弟视图遮挡，这一特性可以用来放置遮盖物(overlays)(例如，文本和按钮等控件)。注意，如果surface上面 有透明控件，那么它的每次变化都会引起框架重新计算它和顶层控件的透明效果，这会影响性能。
        你可以通过SurfaceHolder接口访问这个surface，getHolder()方法可以得到这个接口。
        surfaceview变得可见时，surface被创建；surfaceview隐藏前，surface被销毁。这样能节省资源。如果你要查看 surface被创建和销毁的时机，可以重载surfaceCreated(SurfaceHolder)和 surfaceDestroyed(SurfaceHolder)。
        surfaceview的核心在于提供了两个线程：UI线程和渲染线程。这里应注意：
        1> 所有SurfaceView和SurfaceHolder.Callback的方法都应该在UI线程里调用，一般来说就是应用程序主线程。渲染线程所要访问的各种变量应该作同步处理。
        2> 由于surface可能被销毁，它只在SurfaceHolder.Callback.surfaceCreated()和 SurfaceHolder.Callback.surfaceDestroyed()之间有效，所以要确保渲染线程访问的是合法有效的surface。

二、SurfaceView绘制多个图形

1.新建项目

2.创建类MyView并继承SurfaceView、实现SurfaceHolder.CallBack接口

package com.example.surfaceviewdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

/**
 * Created by 袁磊 on 2017/2/6.
 * <p/>
 * 整个过程：
 * 1.继承SurfaceView并实现SurfaceHolder.Callback接口
 * 2.SurfaceView.getHolder()获得SurfaceHolder对象
 * 3.SurfaceHolder.addCallback(callback)添加回调函数
 * 4.SurfaceHolder.lockCanvas()获得Canvas对象并锁定画布
 * 5.Canvas绘画
 * 6.SurfaceHolder.unlockCanvasAndPost(Canvas canvas)结束锁定画图，并提交改变，将图形显示。
 */

public class MyView extends SurfaceView implements SurfaceHolder.Callback {
    private Paint paint = null;

    public MyView(Context context) {
        super(context);
        paint = new Paint();
        paint.setColor(Color.RED);
        getHolder().addCallback(this);//添加回调函数
    }

    /**
     * 1.绘制方法只在SurfaceHolder.Callback.surfaceCreated()
     * 和SurfaceHolder.Callback.surfaceDestroyed()之间有效
     * 2.若要改变某个图形必须调用canvas.save()和canvas.restore
     * 才不会影响到其他图形的绘制和操作
     */
    public void draw() {
        Canvas canvas = getHolder().lockCanvas();//创建Canvas对象，锁定画布

        canvas.drawColor(Color.WHITE);
        canvas.save();
        canvas.rotate(45, 50, 50);
        canvas.drawRect(0, 0, 100, 100, paint);
        canvas.restore();

        canvas.save();//先保存成可编辑状态
        canvas.rotate(90, getWidth() / 2, getHeight() / 2);//画布旋转90度(注释所说的改变图形操作)
        canvas.drawLine(0, getHeight() / 2, getWidth(), getHeight(), paint);
        canvas.restore();//改变图形结束之后复原

        canvas.drawLine(0, getHeight() / 2 + 100, getWidth(), getHeight() + 100, paint);

        getHolder().unlockCanvasAndPost(canvas);//绘制完毕后解锁画布
    }

    //在创建时激发，一般在这里调用画图的线程。
    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        draw();
    }

    //在surface的大小发生改变时激发
    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

    }

    //销毁时激发，一般在这里将画图的线程停止、释放
    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }
}

MyView

3.MainActivity中使用

package com.example.surfaceviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new MyView(this));
    }
}

MainActivity

4.运行效果

三、SurfaceView绘制组合图形

1.新建项目

2.创建承载子视图容器类Container

package com.example.surfaceviewdemo;

import android.graphics.Canvas;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by 袁磊 on 2017/2/6.
 */
public class Container {
    private List<Container> children = null;
    private float x = 0, y = 0;//初始坐标

    public Container() {
        children = new ArrayList<>();
    }

    /**
     * 绘制
     *
     * @param canvas
     */
    public void draw(Canvas canvas) {
        canvas.save();//保存画布为可编辑状态
        canvas.translate(getX(), getY());
        childrenView(canvas);
        for (Container c : children) {
            c.draw(canvas);
        }
        canvas.restore();//每次绘制完后恢复画布
    }

    /**
     * 承载子视图（childrenView）
     *
     * @param canvas
     */
    public void childrenView(Canvas canvas) {
    }

    /**
     * 添加子视图（childrenView）
     *
     * @param child
     */
    public void addChildrenView(Container child) {
        children.add(child);
    }

    /**
     * 移除子视图（childrenView）
     *
     * @param child
     */
    public void removeChildrenView(Container child) {
        children.remove(child);
    }

    public void setX(float x) {
        this.x = x;
    }

    public float getX() {
        return x;
    }

    public void setY(float y) {
        this.y = y;
    }

    public float getY() {
        return y;
    }

}

Container

3.创建子视图矩形Rect

package com.example.surfaceviewdemo;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

/**
 * Created by 袁磊 on 2017/2/7.
 */
public class Rect extends Container {
    private Paint paint = null;

    public Rect() {
        paint = new Paint();
        paint.setColor(Color.RED);
    }

    @Override
    public void childrenView(Canvas canvas) {
        super.childrenView(canvas);
        canvas.drawRect(0, 0, 100, 100, paint);
        this.setY(this.getY() + 1);
    }
}

Rect

4.创建子视图圆形Circle

package com.example.surfaceviewdemo;

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;

/**
 * Created by 袁磊 on 2017/2/7.
 */
public class Circle extends Container {
    private Paint paint = null;

    public Circle() {
        paint = new Paint();
        paint.setColor(Color.BLUE);
    }

    @Override
    public void childrenView(Canvas canvas) {
        super.childrenView(canvas);
        canvas.drawCircle(50, 50, 50, paint);
    }
}

Circle

5.创建类GameView并继承SurfaceView、实现SurfaceHolder.CallBack接口

package com.example.surfaceviewdemo;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

import java.util.Timer;
import java.util.TimerTask;

/**
 * Created by 袁磊 on 2017/2/7.
 * =====参考MyView
 */
public class GameView extends SurfaceView implements SurfaceHolder.Callback {
    private Container container;
    private Rect rect;
    private Circle circle;

    public GameView(Context context) {
        super(context);
        container = new Container();
        rect = new Rect();
        circle = new Circle();

        rect.addChildrenView(circle);//将圆添加到矩形
        container.addChildrenView(rect);//将矩形添加到子视图容器
        getHolder().addCallback(this);
    }

    /**
     * 绘制图形
     */
    public void draw() {
        Canvas canvas = getHolder().lockCanvas();//创建Canvas对象，锁定画布
        canvas.drawColor(Color.WHITE);//初始化画布为白色
        container.draw(canvas);
        getHolder().unlockCanvasAndPost(canvas);//绘制完毕后解锁画布
    }

    private Timer timer = null;
    private TimerTask task = null;

    public void startTimer() {
        timer = new Timer();
        task = new TimerTask() {
            @Override
            public void run() {
                draw();
            }
        };
        timer.schedule(task, 100, 100);//计划(任务，延时，周期)
    }

    public void stopTimer() {
        if (timer != null) {
            timer.cancel();
            timer = null;
        }
    }

    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        startTimer();
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {
        stopTimer();
    }
}

GameView

6.MainActivity中使用

package com.example.surfaceviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new GameView(this));
    }
}

MainActivity

7.运行效果（沿着箭头方向自上而下不断移动）

时间： 2025-01-15 11:59:09

SurfaceView绘制图形的相关文章

html5 Canvas绘制图形入门详解

html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome.Opera.Safari.IE9+)都已经开始支持html5了.除此之外,在移动浏览器市场上,众多的移动浏览器也纷纷展开关于「html5的支持能力以及性能表现」的军备竞赛.html作为革命性的网页技术标准,再加上众多浏览器厂商或组织的鼎力支持,可以想见,html5将会成为未来网页技术的领头羊. ht

绘制图形

1. 绘制图形,则需要找到合适的绘制图形的函数. 绘制圆弧 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有五个参数: x,y为绘制圆弧所在圆上的圆心坐标.radius为半径.startAngle以及engAngle参数用弧度定义了开始以及结束的弧度.这些都是以x 轴为基准.参数anticlockwise 为一个布尔值.为true时,是逆时针方向,否则顺时针方向.

Android中android.graphics下面的绘制图形类Canvas，Paint，Bitmap，Drawable

1.概念区别: 很多网友刚刚开始学习Android平台,对于Drawable.Bitmap.Canvas和Paint它们之间的概念不是很清楚, 其实它们除了Drawable外早在Sun的J2ME中就已经出现了,但是在Android平台中,Bitmap.Canvas相关的都有所变化. 首先让我们理解下Android平台中的显示类是View,但是还提供了底层图形类android.graphics,今天所说的这些均为graphics底层图形接口. Bitmap - 称作位图,一般位图的文件格式后缀为b

Quartz 各种绘制图形用法---实现画图片、写文字、画线、椭圆、矩形、棱形等

// Only override drawRect: if you perform custom drawing.// An empty implementation adversely affects performance during animation.- (void)drawRect:(CGRect)rect{    CGContextRef context = UIGraphicsGetCurrentContext();         /*NO.1画一条线     CGContex

android:如何用一天时间，写出“飞机大战”这样的游戏！（无框架-SurfaceView绘制）

序言作为一个android开发者,时常想开发一个小游戏娱乐一下大家,今天就说说,我是怎么样一天写出一个简单的"飞机大战"的.体验地址:http://www.wandoujia.com/apps/edu.njupt.zhb.planegame游戏分析玩过"飞机大战"游戏的都知道,飞机大战中的主要"角色"有:1.玩家飞机2.敌方飞机3.玩家飞机发送的子弹4.敌方Boss飞机发送的子弹我们需要控制的有:1.绘制屏幕内的角色2.控制角色的逻辑,比如:敌方

绘制图形-移动,旋转,阴影,渐变

// Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. - (void)drawRect:(CGRect)rect { UIBezierPath *path = [UIBezierPath bezierPath]; //绘图的起点坐标 [path moveToPoint:CGPointMa

HTML5使用Canvas来绘制图形

一.Canvas标签: 1.HTML5<canvas>元素用于图形的绘制,通过脚本(通常是javascript)来完成. 2.<canvas>标签只是图形容器,必须使用脚本来绘制图形. 3.可以通过多种方法通过Canvas绘制路径.盒.圆.字符以及添加图像. 二.Canvas绘制图形 1.绘制矩形 2.绘制圆形 3.moveTo和lineTo 4.使用bezierCurveTo绘制贝塞尔曲线 5.绘制线性渐变 6.绘制径向渐变 7.绘制变形图形 8.绘制图形合成gloablComp

iOS开发UI篇——Core Animation核心动画CAShapeLayer(绘制图形等)简介

重点: 获取绘制图形        Layer CAShapeLayer *shapeLayer = [CAShapeLayer layer];     设置图形有线颜色   [CAShapeLayer layer].strokeColor = [UIColor redColor].CGColor;      设置图形填充颜色   [CAShapeLayer layer].fillColor = [UIColor clearColor].CGColor;   设置图形线宽      [CASha

微信小程序开发—(八)canvas绘制图形

一.小知识 (1).API接口 (2).context 对象的方法列表 二.步骤 wxml中: <canvas canvas-id="myCanvas" class="myCanvas" ></canvas> 在js文件onLoad: function() {}的方法中开始编写代码 1.创建一个 Canvas 绘图上下文 CanvasContext const ctx = wx.createCanvasContext('myCanvas')