Canvas QML Type

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

• 상속된 멤버를 포함한 모든 멤버 목록
• 사용 중단된 멤버

속성

• available : bool
• canvasSize : size
• context : object
• contextType : string
• renderStrategy : enumeration
• renderTarget : enumeration

신호

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

방법

• void cancelRequestAnimationFrame(int handle)
• Context2D getContext(string contextId, ... args)
• bool isImageError(url image)
• bool isImageLoaded(url image)
• bool isImageLoading(url image)
• void loadImage(url image, size sourceSize)
• void markDirty(rect area)
• int requestAnimationFrame(callback)
• void requestPaint()
• bool save(string filename, size imageSize)
• string toDataURL(string mimeType)
• void unloadImage(url image)

상세 설명

Canvas 항목을 사용하면 직선 및 곡선, 단순하고 복잡한 도형, 그래프, 참조된 그래픽 이미지를 그릴 수 있습니다. 또한 텍스트, 색상, 그림자, 그라데이션, 패턴을 추가하고 저수준 픽셀 작업을 수행할 수도 있습니다. Canvas 출력은 이미지 파일로 저장하거나 URL로 직렬화할 수 있습니다.

캔버스로의 렌더링은 ` Context2D ` 객체를 사용하여 수행되며, 일반적으로 ` paint ` 신호의 결과로 발생합니다.

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

import QtQuick 2.0
Canvas {
    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);
    }
}

현재 캔버스(Canvas) 항목은 2차원 렌더링 컨텍스트만 지원합니다.

스레드 기반 렌더링 및 렌더 타겟

Qt 6.0에서 Canvas 항목은 하나의 렌더 타겟인 Canvas.Image 을 지원합니다.

Canvas.Image 렌더 타겟은 QImage 객체입니다. 이 렌더 타겟은 백그라운드 스레드 렌더링을 지원하여, UI를 차단하지 않고도 복잡하거나 오래 걸리는 그리기 작업을 실행할 수 있게 해줍니다. 이는 모든 Qt Quick 백엔드에서 지원하는 유일한 렌더 타겟입니다.

기본 렌더 타깃은 Canvas.Image이며, 기본 renderStrategy 는 Canvas.Immediate입니다.

픽셀 연산

모든 HTML5 2D 컨텍스트 픽셀 연산이 지원됩니다. 픽셀 읽기/쓰기 성능을 향상시키려면 Canvas.Image 렌더 타겟을 선택해야 합니다.

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

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

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

Qt 5.4부터 Canvas는 texture provider 가 되었으며, ShaderEffects 및 텍스처 제공자를 사용하는 다른 클래스에서 직접 사용할 수 있습니다.

Context2D, QQuickPaintedItem 및 Qt Quick 예제 - 포인터 핸들러도참조하십시오 .

속성 설명서

available : bool [read-only]

Canvas가 작업할 수 있는 그리기 컨텍스트를 제공할 수 있을 때를 나타냅니다.

canvasSize : size

컨텍스트가 그리기를 수행하는 논리적 캔버스 크기를 저장합니다.

기본적으로 캔버스 크기는 현재 캔버스 항목의 크기와 동일합니다.

canvasSize, tileSize 및 canvasWindow를 설정하면, Canvas 항목은 별도로 렌더링되는 여러 타일 사각형으로 구성된 대형 가상 캔버스 역할을 할 수 있습니다. 현재 캔버스 창 내에 있는 타일만 Canvas 렌더링 엔진에 의해 그려집니다.

tileSize 및 canvasWindow도 참조하십시오 .

context : object [read-only]

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

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

contextType : string

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

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

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

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

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

renderStrategy : enumeration

현재 캔버스 렌더링 전략을 보관합니다.

이 힌트는 렌더링 방식을 결정하기 위해 그래픽 컨텍스트에 ` renderTarget `와 함께 제공됩니다. 그래픽 컨텍스트에서 `renderStrategy`, ` renderTarget ` 또는 이들의 조합이 지원되지 않을 수 있으며, 이 경우 컨텍스트가 적절한 옵션을 선택하고 Canvas는 속성의 변경 사항을 알립니다.

구성 또는 런타임 테스트로 인해 QML 씬 그래프가 GUI 스레드에서 렌더링될 수 있습니다. Canvas.Cooperative 를 선택한다고 해서 렌더링이 GUI 스레드와 별도의 스레드에서 수행된다는 보장은 없습니다.

기본값은 ` Canvas.Immediate`입니다.

renderTarget도 참조하십시오 .

renderTarget : enumeration

현재 캔버스 렌더 타깃을 보유합니다.

이 힌트는 렌더링 방법을 결정하기 위해 ` renderStrategy `와 함께 그래픽 컨텍스트에 제공됩니다. 그래픽 컨텍스트에서 ` renderStrategy`, `renderTarget` 또는 이들의 조합을 지원하지 않을 수 있으며, 이 경우 컨텍스트가 적절한 옵션을 선택하고 Canvas는 속성의 변경 사항을 알립니다.

기본 렌더링 대상은 Canvas.Image 입니다.

Signal 문서

imageLoaded()

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

loadImage()도 참조하십시오 .

paint(rect region)

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

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

painted()

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

메서드 문서

void cancelRequestAnimationFrame(int handle)

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

Context2D getContext(string contextId, ... args)

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

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

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

Canvas는 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)를 의도된 표시 크기로 로드할 때 유용합니다. 이 매개변수는 Qt 6.7에서 도입되었습니다.

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

void markDirty(rect area)

지정된 area 를 변경된 상태로 표시하여, 이 영역이 화면에 표시될 때 캔버스 렌더러가 해당 영역을 다시 그리도록 합니다. 이로 인해 paint 신호가 발생합니다.

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

int requestAnimationFrame(callback)

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

void requestPaint()

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

markDirty()도 참조하십시오 .

bool save(string filename, size imageSize = undefined)

현재 캔버스 내용을 이미지 파일 filename 로 저장합니다. 저장된 이미지의 형식은 filename 의 확장자에 따라 자동으로 결정됩니다. 성공 시 true 를 반환합니다. imageSize 가 지정된 경우, 결과 이미지는 이 크기를 가지며 devicePixelRatio는 1.0 가 됩니다. 그렇지 않은 경우, 캔버스가 표시된 창의 devicePixelRatio()가 저장된 이미지에 적용됩니다.

canvasWindow, canvasSize 및 toDataURL()도 참조하십시오 .

string toDataURL(string mimeType)

캔버스에 있는 이미지의 데이터 URL을 반환합니다.

mimeType 의 기본값은 "image/png"입니다.

save()도 참조하십시오 .

void unloadImage(url image)

image 를 언로드합니다.

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

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