Canvas2D QML Type

JavaScript를 통해 그림을 그릴 수 있는 2D 캔버스 항목을 제공합니다. 더 보기...

이 유형은 기술 미리보기 단계에 있으며 변경될 수 있습니다.

• 상속된 멤버를 포함한 모든 멤버 목록

속성

• available : bool
• context : object
• contextType : string

신호

• imageLoaded()
• paint(rect region)
• painted()

방법

• void cancelRequestAnimationFrame(int handle)
• object getContext(string contextId, ... args)
• bool isImageError(url image)
• bool isImageLoaded(url image)
• bool isImageLoading(url image)
• void loadImage(url image, size sourceSize)
• void markDirty()
• int requestAnimationFrame(callback)
• void requestPaint()
• void unloadImage(url image)

상세 설명

Canvas2D 항목을 사용하면 직선과 곡선, 단순 및 복합 도형, 그래프, 참조된 그래픽 이미지를 그릴 수 있습니다. 또한 텍스트, 색상, 그라데이션 및 패턴을 추가할 수도 있습니다.

Canvas에 대한 렌더링은 Canvas2DContext 객체를 사용하여 수행되며, 일반적으로 paint 신호의 결과로 발생합니다.

Canvas2D 항목에서 그리기 영역을 정의하려면 width 및 height 속성을 설정하십시오. 예를 들어, 다음 코드는 높이 100픽셀, 너비 200픽셀의 그리기 영역을 가진 Canvas2D 항목을 생성합니다:

import QtCanvas2D

Canvas2D {
    id: mycanvas
    width: 100
    height: 200
    onPaint: {
        var ctx = getContext("2d");
        ctx.fillStyle = Qt.rgba(1, 0, 0, 1);
        ctx.fillRect(0, 0, width, height);
    }
}

기존 HTML5 캔버스 애플리케이션 이식 팁

Canvas 항목은 HTML5와 유사한 API를 제공하지만, HTML5 캔버스 애플리케이션을 Canvas 항목에서 실행하려면 다음과 같이 수정해야 합니다:

• 모든 DOM API 호출을 QML 속성 바인딩이나 Canvas 항목 메서드로 대체하십시오.
• 모든 HTML 이벤트 핸들러를 ` MouseArea ` 항목으로 대체하십시오.
• setInterval/setTimeout 함수 호출을 ` FrameAnimation ` 항목이나 ` requestAnimationFrame()` 사용으로 변경하십시오.
• 그리기 코드를 ` onPaint ` 핸들러에 넣고, ` markDirty()` 또는 ` requestPaint()` 메서드를 호출하여 그리기를 트리거하십시오.
• 이미지를 그리려면 Canvas의 loadImage() 메서드를 호출하여 이미지를 불러온 다음, onImageLoaded 핸들러에서 그리기를 요청하십시오.

Canvas2DContext, QCanvasPainterItem 및 QCanvasPainter도 참조하십시오 .

속성 설명서

available : bool

Canvas가 작업할 드로잉 컨텍스트를 제공할 수 있을 때를 나타냅니다.

context : object

활성 드로잉 컨텍스트를 보관합니다.

캔버스가 준비된 상태이고, ` getContext()` 호출이 성공했거나 ` contextType ` 속성이 지원되는 컨텍스트 유형으로 설정된 경우, 이 속성은 현재 드로잉 컨텍스트를 포함하며, 그렇지 않은 경우 null을 반환합니다.

contextType : string

사용할 드로잉 컨텍스트의 유형입니다.

이 속성은 활성 컨텍스트 유형의 이름으로 설정됩니다.

명시적으로 설정된 경우, 캔버스는 사용 가능해지면 지정된 유형의 컨텍스트를 생성하려고 시도합니다.

유형 이름은 getContext() 호출에서 사용되는 것과 동일하며, 2D 캔버스의 경우 값은 "2d"가 됩니다.

getContext() 및 available도 참조하십시오 .

Signal 문서

imageLoaded()

이 신호는 이미지가 로드되었을 때 발생합니다.

loadImage()도 참조하십시오 .

paint(rect region)

이 신호는 region 을 렌더링해야 할 때 발생합니다. 활성 컨텍스트가 있는 경우, context 속성을 통해 해당 컨텍스트를 참조할 수 있습니다.

이 신호는 ` markDirty()`, ` requestPaint()` 또는 현재 캔버스 창이 변경될 때 트리거될 수 있습니다.

painted()

이 신호는 모든 컨텍스트 그리기 명령이 실행되고 캔버스가 렌더링된 후에 발생합니다.

메서드 문서

void cancelRequestAnimationFrame(int handle)

이 함수는 ` handle`에서 참조하는 애니메이션 콜백을 취소합니다.

object getContext(string contextId, ... args)

드로잉 컨텍스트를 반환하며, 사용 가능한 컨텍스트가 없는 경우 ` null `를 반환합니다.

contextId 매개변수는 필요한 컨텍스트의 이름을 지정합니다. Canvas2D 항목은 필요한 그리기 모드를 구현하는 컨텍스트를 반환합니다. getContext를 처음 호출한 후, 동일한 contextId로 getContext를 다시 호출하면 동일한 컨텍스트 객체가 반환됩니다. 추가 인자(args)는 현재 무시됩니다.

컨텍스트 유형이 지원되지 않거나, 캔버스에 이전에 다른 호환되지 않는 컨텍스트 유형을 제공하도록 요청된 적이 있는 경우, ` null `가 반환됩니다.

Canvas2D 2D 컨텍스트만 지원합니다.

bool isImageError(url image)

image 를 불러오는 데 실패하면 true 를 반환하고, 그렇지 않으면 false 를 반환합니다.

loadImage()도 참조하십시오 .

bool isImageLoaded(url image)

image 가 성공적으로 로드되어 사용 준비가 완료된 경우 true를 반환합니다.

loadImage()도 참조하십시오 .

bool isImageLoading(url image)

image 가 현재 로드 중이면 true를 반환합니다.

loadImage()도 참조하십시오 .

void loadImage(url image, size sourceSize = undefined)

지정된 image 를 비동기적으로 불러옵니다.

이미지 준비가 완료되면 imageLoaded() 시그널이 발생합니다. 로드된 이미지는 unloadImage() 메서드를 사용하여 언로드할 수 있습니다.

sourceSize 가 지정된 경우, 이미지는 로드되는 동안 해당 크기로 조정됩니다. 이는 확장 가능한(벡터) 이미지(예: SVG)를 의도된 표시 크기로 로드할 때 유용합니다.

unloadImage(), imageLoaded(), isImageLoaded(), Context2D::createImageData(), Context2D::drawImage()도 참조하십시오 .

void markDirty()

캔버스를 더러워진 상태로 표시합니다. 이렇게 하면 paint 신호가 트리거됩니다.

paint 및 requestPaint()도 참조하십시오 .

int requestAnimationFrame(callback)

이 함수는 ‘ callback ’가 ‘ Qt Quick ’ 씬을 구성하기 전에 호출되도록 예약합니다.

void requestPaint()

보이는 영역 전체를 다시 그리도록 요청합니다.

markDirty()도 참조하십시오 .

void unloadImage(url image)

image 를 언로드합니다.

이미지가 언로드되면, 다시 로드되지 않는 한 캔버스 컨텍스트에서 해당 이미지를 그릴 수 없습니다.

loadImage(), imageLoaded(), isImageLoaded(), Context2D::createImageData() 및 Context2D::drawImage도 참조하십시오 .