찾다
웹 프론트엔드H5 튜토리얼캔버스는 다양한 기본 그래픽을 그립니다.

캔버스는 다양한 기본 그래픽을 그립니다.

Jul 03, 2018 am 10:54 AM
androidcanvas제도법그리다

이 글은 안드로이드 프로그래밍에서 캔버스를 이용해 다양한 그래픽을 그리는 방법을 주로 소개하는데, 캔버스 클래스의 일반적인 그리기 방법을 사용하는 안드로이드 관련 기술이 필요한 친구들이 참고할 수 있습니다. 기사에서는 Android 프로그래밍에서 캔버스를 사용하여 다양한 그래픽을 그리는 방법을 설명합니다. 다음과 같이 참조용으로 모든 사람과 공유하세요.

1 먼저 캔버스 클래스에 대해 이야기해 보겠습니다.

클래스 개요

캔버스 클래스에는 무언가를 그리려면 다음이 필요합니다. 4가지 기본 구성 요소: 픽셀을 보관하는 비트맵, 그리기 호출을 호스팅하는 캔버스(비트맵에 쓰기), 그리기 기본 요소(예: 사각형, 경로, 텍스트, 비트맵) 및 페인트(색상과 스타일을 설명하기 위한)

이 클래스는 캔버스와 동일하며 그 안에 많은 것을 그릴 수 있습니다.

이 캔버스는 시스템에서 제공하는 메모리 영역으로 이해할 수 있습니다. 그리기 API, 실제 메모리 아래 비트맵입니다) 또한 이 메모리 영역에서 작동하는 완전한 메서드 세트를 제공하며 모두 그리기 API입니다. 즉, 이런 방식으로 우리는 한 번에 한 획씩 필요한 것을 그릴 수 있거나 그래픽을 사용할 수 있습니다. 우리가 그리고 싶은 것과 표시하려는 것이 모두 우리의 통제하에 있습니다.

이 방법은 환경에 따라 두 가지로 나누어집니다.

일반 View의 캔버스를 사용하여 그리는 방법과 특수 SurfaceView의 캔버스를 사용하여 그리는 방법이 있습니다. 둘 사이의 주요 차이점은 그리기 작업을 완료하기 위해 SurfaceView에 특수 스레드를 정의할 수 있다는 점입니다. 응용 프로그램은 보기가 새로 고쳐질 때까지 기다릴 필요가 없으므로 성능이 향상됩니다. 전자는 체스 게임과 같이 상대적으로 처리량이 적고 프레임 속도가 낮은 애니메이션에 적합한 반면, 후자는 주로 게임 및 고품질 애니메이션 드로잉에 사용됩니다.

다음은 Canvas 클래스에서 일반적으로 사용되는 메서드입니다.

drawRect(RectF ect, Paint Paint) //영역 그리기, 매개변수 1은 RectF 영역

drawPath(Path path, Paint Paint) ) //경로 그리기, 첫 번째 매개변수는 Path 객체 drawBitmap(Bitmap bitmap, Rect src, Rect dst, Paint Paint) //map, 첫 번째 매개변수는 일반 Bitmap 객체, 두 번째 매개변수는 소스 영역( 여기에는 비트맵이 있습니다), 매개변수 3번은 대상 영역(캔버스의 위치 및 크기여야 함)이고, 매개변수 4는 페인트 브러시 개체입니다. 원본 Rect가 같지 않을 때 크기 조정 및 늘이기 가능성이 사용되기 때문입니다. 대상 Rect에 연결하면 성능이 크게 저하됩니다.
drawLine(float startX, float startY, float stopX, float stopY, Paintpaint) //1번 매개변수 시작점의 x축 위치, 2번 매개변수 시작점의 y축 위치로 선을 그리고, 세 번째 매개변수의 끝점의 x축 가로 위치, 4개의 매개변수는 y축의 세로 위치, 마지막 매개변수는 페인트 브러시 개체입니다.
drawPoint(float x, float y, Paint Paint) //점을 그립니다. 매개변수 1은 가로 x축, 매개변수 2는 세로 y축, 세 번째 매개변수는 Paint 개체입니다.
drawText(String text, float x, floaty, Paint Paint) //텍스트를 렌더링합니다. 위 항목 외에도 Canvas 클래스는 텍스트를 그릴 수도 있습니다. 첫 번째 매개변수는 문자열 유형 텍스트이고, 두 번째 매개변수는 x축입니다. 세 번째 매개변수는 y축입니다. 매개변수 4는 Paint 개체입니다.
drawOval(RectF 타원, 페인트 페인트)//타원 그리기, 매개변수 1은 스캔 영역, 매개변수 2는 페인트 개체
drawCircle(float cx, float cy, float radius, Paint Paint)//원 그리기, 매개변수 첫 번째 매개변수는 중심점의 x축, 두 번째 매개변수는 중심점의 y축, 세 번째 매개변수는 반경, 네 번째 매개변수는 페인트 객체입니다.
drawArc(RectF oval, float startAngle; , floatweepAngle, boolean useCenter, 페인트 페인트)/ /호 그리기,
매개변수 1은 RectF 객체이고 직사각형 영역 타원의 경계는 모양, 크기 및 호를 정의하는 데 사용되며 매개변수 2는 시작 각도(
매개변수 3은 스캐닝 각도(도)입니다. 시계 방향으로 측정을 시작하고, 매개변수 4는 이것이 참이면 타원 중심에 호를 포함하고, 거짓이면 닫습니다. 호가 될 것이며 매개변수 5는 Paint 객체입니다.

페인트 클래스도 이해하세요:

클래스 개요

Paint 클래스는 기하학, 텍스트 및 비트맵을 그리는 방법에 대한 스타일 및 색상 정보를 보유합니다.

페인트 클래스는 기하학, 텍스트 및 비트맵, 텍스트 및 비트맵을 그리는 방법에 대한 스타일 및 색상 정보를 보유합니다.

Paint는 캔버스의 브러시, 페인트, 페인트 등을 나타냅니다.

Paint 클래스의 일반적인 메서드:

setARGB(int a, int r, int g, int b) // Paint 설정 객체 색상, 매개변수 1은 알파 투명도 값

setAlpha(int a) // 알파 불투명도 설정, 범위는 0~255 setAntiAlias(boolean aa) // 앤티앨리어싱 여부
setColor(int color) // 설정 Android 내부 정의된 Color 클래스에는 몇 가지 일반적인 색상 정의가 포함되어 있습니다.
setTextScaleX(float scaleX) // 텍스트 배율 인수를 설정합니다. 1.0f가 원본입니다.
setTextSize(float textSize) // 글꼴 크기를 설정합니다.
setUnderlineText(booleanunderlineText ) // 밑줄 설정

2. 케이스를 직접 보세요

렌더링을 보세요:

이 경우 사용자 정의 뷰 클래스를 사용합니다:

CustomActivity.java

# 🎜🎜#

public class CustomActivity extends Activity { 
  @Override 
  public void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.main); 
    init(); 
  } 
  private void init() { 
    LinearLayout layout=(LinearLayout) findViewById(R.id.root); 
    final DrawView view=new DrawView(this); 
    view.setMinimumHeight(500); 
    view.setMinimumWidth(300); 
    //通知view组件重绘  
    view.invalidate(); 
    layout.addView(view); 
  } 
}

View 구성 요소를 사용자 정의하는 중요한 클래스는 View 구성 요소의 onDraw(Canvase) 메서드를 재정의하는 것입니다. 다음 단계는 캔버스에 수많은 기하학적 도형을 그리는 것입니다. 점, 선, 호, 원, 타원, 텍스트, 직사각형, 다각형, 곡선, 둥근 직사각형 및 기타 모양!

DrawView.java

public class DrawView extends View { 
  public DrawView(Context context) { 
    super(context); 
  } 
  @Override 
  protected void onDraw(Canvas canvas) { 
    super.onDraw(canvas); 
    /* 
     * 方法 说明 drawRect 绘制矩形 drawCircle 绘制圆形 drawOval 绘制椭圆 drawPath 绘制任意多边形 
     * drawLine 绘制直线 drawPoin 绘制点 
     */ 
    // 创建画笔 
    Paint p = new Paint(); 
    p.setColor(Color.RED);// 设置红色 
    canvas.drawText("画圆:", 10, 20, p);// 画文本 
    canvas.drawCircle(60, 20, 10, p);// 小圆 
    p.setAntiAlias(true);// 设置画笔的锯齿效果。 true是去除,大家一看效果就明白了 
    canvas.drawCircle(120, 20, 20, p);// 大圆 
    canvas.drawText("画线及弧线:", 10, 60, p); 
    p.setColor(Color.GREEN);// 设置绿色 
    canvas.drawLine(60, 40, 100, 40, p);// 画线 
    canvas.drawLine(110, 40, 190, 80, p);// 斜线 
    //画笑脸弧线 
    p.setStyle(Paint.Style.STROKE);//设置空心 
    RectF oval1=new RectF(150,20,180,40); 
    canvas.drawArc(oval1, 180, 180, false, p);//小弧形 
    oval1.set(190, 20, 220, 40); 
    canvas.drawArc(oval1, 180, 180, false, p);//小弧形 
    oval1.set(160, 30, 210, 60); 
    canvas.drawArc(oval1, 0, 180, false, p);//小弧形 
    canvas.drawText("画矩形:", 10, 80, p); 
    p.setColor(Color.GRAY);// 设置灰色 
    p.setStyle(Paint.Style.FILL);//设置填满 
    canvas.drawRect(60, 60, 80, 80, p);// 正方形 
    canvas.drawRect(60, 90, 160, 100, p);// 长方形 
    canvas.drawText("画扇形和椭圆:", 10, 120, p); 
    /* 设置渐变色 这个正方形的颜色是改变的 */ 
    Shader mShader = new LinearGradient(0, 0, 100, 100, 
        new int[] { Color.RED, Color.GREEN, Color.BLUE, Color.YELLOW, 
            Color.LTGRAY }, null, Shader.TileMode.REPEAT); // 一个材质,打造出一个线性梯度沿著一条线。 
    p.setShader(mShader); 
    // p.setColor(Color.BLUE); 
    RectF oval2 = new RectF(60, 100, 200, 240);// 设置个新的长方形,扫描测量
    canvas.drawArc(oval2, 200, 130, true, p); 
    // 画弧,第一个参数是RectF:该类是第二个参数是角度的开始,第三个参数是多少度,第四个参数是真的时候画扇形,是假的时候画弧线 
    //画椭圆,把oval改一下 
    oval2.set(210,100,250,130); 
    canvas.drawOval(oval2, p); 
    canvas.drawText("画三角形:", 10, 200, p); 
    // 绘制这个三角形,你可以绘制任意多边形 
    Path path = new Path(); 
    path.moveTo(80, 200);// 此点为多边形的起点 
    path.lineTo(120, 250); 
    path.lineTo(80, 250); 
    path.close(); // 使这些点构成封闭的多边形 
    canvas.drawPath(path, p); 
    // 你可以绘制很多任意多边形,比如下面画六连形 
    p.reset();//重置 
    p.setColor(Color.LTGRAY); 
    p.setStyle(Paint.Style.STROKE);//设置空心 
    Path path1=new Path(); 
    path1.moveTo(180, 200); 
    path1.lineTo(200, 200); 
    path1.lineTo(210, 210); 
    path1.lineTo(200, 220); 
    path1.lineTo(180, 220); 
    path1.lineTo(170, 210); 
    path1.close();//封闭 
    canvas.drawPath(path1, p); 
    /* 
     * Path类封装复合(多轮廓几何图形的路径 
     * 由直线段*、二次曲线,和三次方曲线,也可画以油画。drawPath(路径、油漆),要么已填充的或抚摸 
     * (基于油漆的风格),或者可以用于剪断或画画的文本在路径。 
     */ 
    //画圆角矩形 
    p.setStyle(Paint.Style.FILL);//充满 
    p.setColor(Color.LTGRAY); 
    p.setAntiAlias(true);// 设置画笔的锯齿效果 
    canvas.drawText("画圆角矩形:", 10, 260, p); 
    RectF oval3 = new RectF(80, 260, 200, 300);// 设置个新的长方形 
    canvas.drawRoundRect(oval3, 20, 15, p);//第二个参数是x半径,第三个参数是y半径 
    //画贝塞尔曲线 
    canvas.drawText("画贝塞尔曲线:", 10, 310, p); 
    p.reset(); 
    p.setStyle(Paint.Style.STROKE); 
    p.setColor(Color.GREEN); 
    Path path2=new Path(); 
    path2.moveTo(100, 320);//设置Path的起点 
    path2.quadTo(150, 310, 170, 400); //设置贝塞尔曲线的控制点坐标和终点坐标
    canvas.drawPath(path2, p);//画出贝塞尔曲线 
    //画点 
    p.setStyle(Paint.Style.FILL); 
    canvas.drawText("画点:", 10, 390, p); 
    canvas.drawPoint(60, 390, p);//画一个点 
    canvas.drawPoints(new float[]{60,400,65,400,70,400}, p);//画多个点 
    //画图片,就是贴图 
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher); 
    canvas.drawBitmap(bitmap, 250,360, p); 
  } 
}

위 내용은 전체 내용입니다 이 기사가 모든 분들의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 주목해 주세요!

관련 권장 사항:

Canvas를 사용하여 Baidu Tieba 클라이언트 로딩 볼 방식 모방
#🎜🎜 ## 🎜🎜#HTML5 캔버스 그리기 다섯개 별 방법


위 내용은 캔버스는 다양한 기본 그래픽을 그립니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
기본 이외 : H5 코드의 고급 기술기본 이외 : H5 코드의 고급 기술May 02, 2025 am 12:03 AM

H5에 대한 고급 팁에는 다음이 포함됩니다. 1. 복잡한 그래픽 사용, 2. 웹 워크를 사용하여 성능 향상, 3. WebStorage, 4. 응답 디자인 구현, 5. WebRTC를 사용하여 실시간 커뮤니케이션을 달성하기 위해, 6. 성능 최적화 및 모범 사례를 수행하십시오. 이 팁은 개발자가보다 역동적이고 대화식 및 효율적인 웹 응용 프로그램을 구축 할 수 있도록 도와줍니다.

H5 : 웹 컨텐츠 및 디자인의 미래H5 : 웹 컨텐츠 및 디자인의 미래May 01, 2025 am 12:12 AM

H5 (HTML5)는 새로운 요소와 API를 통해 웹 컨텐츠와 디자인을 개선합니다. 1) H5는 시맨틱 태깅 및 멀티미디어 지원을 향상시킵니다. 2) 웹 디자인을 풍부하게하는 캔버스 및 SVG를 소개합니다. 3) H5는 새로운 태그와 API를 통해 HTML 기능을 확장하여 작동합니다. 4) 기본 사용에는이를 사용하여 그래픽 생성이 포함되며, 고급 사용량은 WebStorageapi와 관련이 있습니다. 5) 개발자는 브라우저 호환성 및 성능 최적화에주의를 기울여야합니다.

H5 : 웹 개발을위한 새로운 기능 및 기능H5 : 웹 개발을위한 새로운 기능 및 기능Apr 29, 2025 am 12:07 AM

H5는 여러 가지 새로운 기능과 기능을 제공하여 웹 페이지의 상호 작용 및 개발 효율성을 크게 향상시킵니다. 1. Enhance SEO와 같은 시맨틱 태그. 2. 멀티미디어 지원은 오디오 및 비디오 재생 및 태그를 단순화합니다. 3. 캔버스 드로잉은 역동적 인 그래픽 드로잉 도구를 제공합니다. 4. 로컬 스토리지는 LocalStorage 및 SessionStorage를 통해 데이터 스토리지를 단순화합니다. 5. Geolocation API는 위치 기반 서비스의 개발을 용이하게합니다.

H5 : HTML5의 주요 개선H5 : HTML5의 주요 개선Apr 28, 2025 am 12:26 AM

HTML5는 5 가지 주요 개선 사항을 제공합니다. 1. 시맨틱 태그는 코드 선명도 및 SEO 효과를 향상시킵니다. 2. 멀티미디어 지원은 비디오 및 오디오 임베딩을 단순화합니다. 3. 형태 향상은 검증을 단순화한다. 4. 오프라인 및 로컬 스토리지는 사용자 경험을 향상시킵니다. 5. 캔버스 및 그래픽 기능은 웹 페이지의 시각화를 향상시킵니다.

HTML5 : 표준과 웹 개발에 미치는 영향HTML5 : 표준과 웹 개발에 미치는 영향Apr 27, 2025 am 12:12 AM

HTML5의 핵심 기능에는 시맨틱 태그, 멀티미디어 지원, 오프라인 저장 및 로컬 스토리지 및 형태 향상이 포함됩니다. 1. 코드 가독성 및 SEO 효과를 향상시키는 시맨틱 태그 등. 2. 레이블로 멀티미디어 임베딩을 단순화하십시오. 3. ApplicationCache 및 LocalStorage와 같은 오프라인 스토리지 및 로컬 스토리지는 네트워크없는 작동 및 데이터 저장을 지원합니다. 4. 양식 향상은 처리 및 검증을 단순화하기 위해 새로운 입력 유형 및 검증 속성을 도입합니다.

H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼H5 코드 예제 : 실제 응용 프로그램 및 튜토리얼Apr 25, 2025 am 12:10 AM

H5는 다양한 새로운 기능과 기능을 제공하여 프론트 엔드 개발 기능을 크게 향상시킵니다. 1. 멀티미디어 지원 : 미디어를 포함하고 요소를 포함하여 플러그인이 필요하지 않습니다. 2. 캔버스 : 요소를 사용하여 2D 그래픽 및 애니메이션을 동적으로 렌더링합니다. 3. 로컬 스토리지 : LocalStorage 및 SessionStorage를 통해 지속적인 데이터 저장을 구현하여 사용자 경험을 향상시킵니다.

H5와 HTML5 사이의 연결 : 유사성과 차이H5와 HTML5 사이의 연결 : 유사성과 차이Apr 24, 2025 am 12:01 AM

H5 및 HTML5는 다른 개념입니다. HTML5는 새로운 요소 및 API를 포함하는 HTML의 버전입니다. H5는 HTML5를 기반으로 한 모바일 애플리케이션 개발 프레임 워크입니다. HTML5는 브라우저를 통해 코드를 구문 분석하고 렌더링하는 반면 H5 응용 프로그램은 컨테이너를 실행하고 JavaScript를 통해 기본 코드와 상호 작용해야합니다.

H5 코드의 빌딩 블록 : 주요 요소 및 그 목적H5 코드의 빌딩 블록 : 주요 요소 및 그 목적Apr 23, 2025 am 12:09 AM

HTML5의 주요 요소에는 최신 웹 페이지를 작성하는 데 사용되는 ,,,,, 등이 포함됩니다. 1. 헤드 컨텐츠 정의, 2. 링크를 탐색하는 데 사용됩니다. 3. 독립 기사의 내용을 나타내고, 4. 페이지 내용을 구성하고, 5. 사이드 바 컨텐츠 표시, 6. 바닥 글을 정의하면, 이러한 요소는 웹 페이지의 구조와 기능을 향상시킵니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

SecList

SecList

SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.