Context2D QML Type

Canvas 항목에 있는 도형에 대한 2D 컨텍스트를 제공합니다. 더 보기...

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

속성

• canvas : QtQuick::Canvas
• fillRule : enumeration
• fillStyle : variant
• font : string
• globalAlpha : real
• globalCompositeOperation : string
• lineCap : string
• lineDashOffset : real (since QtQuick 2.11)
• lineJoin : string
• lineWidth : real
• miterLimit : real
• shadowBlur : real
• shadowColor : string
• shadowOffsetX : real
• shadowOffsetY : real
• strokeStyle : variant
• textAlign : string
• textBaseline : string

방법

• Context2D arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)
• Context2D arcTo(real x1, real y1, real x2, real y2, real radius)
• Context2D beginPath()
• Context2D bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)
• Context2D clearRect(real x, real y, real w, real h)
• Context2D clip()
• Context2D closePath()
• CanvasGradient createConicalGradient(real x, real y, real angle)
• CanvasImageData createImageData(CanvasImageData imageData)
• CanvasImageData createImageData(Url imageUrl)
• CanvasImageData createImageData(real sw, real sh)
• CanvasGradient createLinearGradient(real x0, real y0, real x1, real y1)
• variant createPattern(Image image, string repetition)
• variant createPattern(color color, enumeration patternMode)
• CanvasGradient createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)
• void drawImage(variant image, real dx, real dy)
• void drawImage(variant image, real dx, real dy, real dw, real dh)
• void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)
• Context2D ellipse(real x, real y, real w, real h)
• Context2D fill()
• Context2D fillRect(real x, real y, real w, real h)
• Context2D fillText(text, x, y)
• CanvasImageData getImageData(real x, real y, real w, real h)
• array getLineDash() (since QtQuick 2.11)
• bool isPointInPath(real x, real y)
• Context2D lineTo(real x, real y)
• var measureText(text)
• Context2D moveTo(real x, real y)
• void putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)
• Context2D quadraticCurveTo(real cpx, real cpy, real x, real y)
• Context2D rect(real x, real y, real w, real h)
• Context2D reset()
• Context2D resetTransform()
• Context2D restore()
• Context2D rotate(real angle)
• Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)
• Context2D save()
• Context2D scale(real x, real y)
• void setLineDash(array pattern) (since QtQuick 2.11)
• Context2D setTransform(real a, real b, real c, real d, real e, real f)
• Context2D shear(real sh, real sv)
• Context2D stroke()
• Context2D strokeRect(real x, real y, real w, real h)
• Context2D strokeText(text, x, y)
• Context2D text(string text, real x, real y)
• Context2D transform(real a, real b, real c, real d, real e, real f)
• Context2D translate(real x, real y)

상세 설명

Context2D 객체는 ` Canvas ` 항목의 ` getContext() ` 메서드를 통해 생성할 수 있습니다:

Canvas {
  id:canvas
  onPaint:{
     var ctx = canvas.getContext('2d');
     //...
  }
}

Context2D API는 W3C Canvas 2D Context API 표준을 구현하며, 일부 향상된 기능을 제공합니다.

Context2D API는 Canvas 항목에 그림을 그리는 데 필요한 메서드와 속성을 정의하는 렌더링 컨텍스트를 제공합니다. 다음 코드는 context 변수에 캔버스 렌더링 컨텍스트를 할당합니다:

var context = mycanvas.getContext("2d")

Context2D API는 아래 그림과 같이 원점 (0,0)이 왼쪽 상단 모서리에 위치한 좌표계로 캔버스를 렌더링합니다. 좌표는 캔버스의 x 축을 따라 왼쪽에서 오른쪽으로, y 축을 따라 위에서 아래로 증가합니다.

속성 설명서

canvas : QtQuick::Canvas

컨텍스트가 그리기를 수행하는 캔버스 항목을 보관합니다.

이 속성은 읽기 전용입니다.

fillRule : enumeration

도형을 채우는 데 사용되는 현재 채우기 규칙을 저장합니다. 다음 채우기 규칙이 지원됩니다:

fillStyle도 참조하십시오 .

fillStyle : variant

도형 채우기에 사용되는 현재 스타일을 저장합니다. 이 스타일은 CSS 색상이 포함된 문자열이거나, ` CanvasGradient ` 또는 `CanvasPattern` 객체일 수 있습니다. 유효하지 않은 값은 무시됩니다. 이 속성은 다음과 같은 여러 가지 색상 구문을 지원합니다:

• 'rgb(red, green, blue)' - 예: 'rgb(255, 100, 55)' 또는 'rgb(100%, 70%, 30%)'
• 'rgba(red, green, blue, alpha)' - 예: 'rgb(255, 100, 55, 1.0)' 또는 'rgb(100%, 70%, 30%, 0.5)'
• 'hsl(색조, 채도, 명도)'
• 'hsla(hue, saturation, lightness, alpha)'
• '#RRGGBB' - 예: '#00FFCC'
• Qt.rgba(red, green, blue, alpha) - 예: Qt.rgba(0.3, 0.7, 1, 1.0)

fillStyle 나 strokeStyle 가 루프 내에서 여러 번 할당되는 경우, 성능이 가장 뛰어난 마지막 Qt.rgba() 구문을 선택해야 합니다. 이는 이미 유효한 QColor 값이므로 매번 파싱할 필요가 없기 때문입니다.

기본값은 '#000000'입니다.

createLinearGradient(), createRadialGradient(), createPattern() 및 strokeStyle도 참조하십시오 .

font : string

현재 글꼴 설정을 유지합니다.

W3C 2D 컨텍스트 표준 중 글꼴 관련 하위 집합이 지원됩니다:

• font-style (선택 사항): normal | italic | oblique
• font-variant (선택 사항): normal | small-caps
• font-weight (선택 사항): normal | bold | 1 ... 1000
• font-size: Npx | Npt (여기서 N은 양수)
• font-family: http://www.w3.org/TR/CSS2/fonts.html#propdef-font-family 참조

기본 글꼴 값은 "10px sans-serif"입니다.

globalAlpha : real

렌더링 작업에 적용되는 현재 알파 값을 저장합니다. 이 값은 0.0 (완전 투명)부터 1.0 (완전 불투명)까지의 범위여야 합니다. 기본값은 1.0 입니다.

globalCompositeOperation : string

현재의 구성 작업을 유지합니다. 허용되는 작업은 다음과 같습니다:

W3C 표준에 따라, 필수 모드 이외의 확장된 합성 모드는 “벤더명-연산명” 구문으로 제공됩니다. 예를 들어, QPainter::CompositionMode_Exclusion 는 “qt-exclusion”으로 제공됩니다.

lineCap : string

현재 선 끝 모양을 저장합니다. 사용할 수 있는 선 끝 모양은 다음과 같습니다:

그 외의 값은 무시됩니다.

lineDashOffset : real [since QtQuick 2.11]

현재 선 대시 오프셋을 저장합니다. 기본 선 대시 오프셋 값은 0 입니다.

이 속성은 QtQuick 2.11에서 도입되었습니다.

getLineDash() 및 setLineDash()도 참조하십시오 .

lineJoin : string

현재 선 연결 스타일을 저장합니다. 연결은 두 개의 연속된 선이 공유하는 부분 경로의 어느 지점에서나 존재합니다. 부분 경로가 닫혀 있는 경우, 해당 부분 경로의 첫 번째 선과 마지막 선을 연결하는 첫 번째 지점(마지막 지점과 동일)에도 연결이 존재합니다.

사용 가능한 선 연결 스타일은 다음과 같습니다:

그 외의 값은 무시됩니다.

lineWidth : real

현재 선 너비를 저장합니다. 0보다 큰 유한값이 아닌 값은 무시됩니다.

miterLimit : real

현재 마이터 제한 비율을 저장합니다. 기본 마이터 제한 값은 10.0입니다.

shadowBlur : real

그림자에 적용된 현재 블러 수준을 유지합니다.

shadowColor : string

현재 그림자 색상을 저장합니다.

shadowOffsetX : real

현재 섀도우 오프셋을 양의 수평 거리로 저장합니다.

shadowOffsetY도 참조하십시오 .

shadowOffsetY : real

현재 섀도우 오프셋을 양의 수직 거리로 저장합니다.

shadowOffsetX도 참조하십시오 .

strokeStyle : variant

도형 주변의 선에 사용할 현재 색상 또는 스타일을 저장합니다. 스타일은 CSS 색상이 포함된 문자열, ` CanvasGradient ` 또는 `CanvasPattern` 객체일 수 있습니다. 유효하지 않은 값은 무시됩니다.

기본값은 '#000000'입니다.

createLinearGradient(), createRadialGradient(), createPattern() 및 fillStyle도 참조하십시오 .

textAlign : string

현재 텍스트 정렬 설정을 저장합니다. 사용할 수 있는 값은 다음과 같습니다:

그 외의 값은 무시됩니다.

textBaseline : string

현재 기준선 정렬 설정을 유지합니다. 사용할 수 있는 값은 다음과 같습니다:

그 외의 값은 무시됩니다. 기본값은 "alphabetic"입니다.

메서드 설명

Context2D arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

현재 서브 경로에, 중심이 점 (x, y)에 있고 반지름이 radius 인 원의 원주 위에 놓이는 호를 추가합니다.

startAngle 과 endAngle 는 모두 x축을 기준으로 라디안 단위로 측정됩니다.

위 그림의 각 호는 모두 시계 방향으로 그려졌기 때문에, anticlockwise 매개변수는 각 호마다 false 가 됩니다.

arcTo 및 W3C의 arc()에 대한 2D 컨텍스트 표준도 참조하십시오 .

Context2D arcTo(real x1, real y1, real x2, real y2, real radius)

지정된 제어점과 반지름을 가진 호를 현재 하위 경로에 추가하며, 이 호는 이전 점과 직선으로 연결됩니다. 호를 그리려면 선을 그릴 때와 동일한 단계부터 시작합니다:

• beginPath() 메서드를 호출하여 새 경로를 설정합니다.
• moveTo(x, y) 메서드를 호출하여 캔버스 상의 (x, y) 지점을 시작 위치로 설정합니다.
• 호나 원을 그리려면 arcTo(x1, y1, x2, y2, radius) 메서드를 호출하십시오. 이렇게 하면 시작점(x1, y1), 끝점(x2, y2) 및 radius 을 가진 호가 현재 하위 경로에 추가되고, 이 호는 직선을 통해 이전 하위 경로와 연결됩니다.

arcTo()에 대해서는arc 및 W3C의 2D 컨텍스트 표준을참조하십시오 .

Context2D beginPath()

현재 경로를 새로운 경로로 재설정합니다.

Context2D bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y)

(cp1x, cp1y) 및 (cp2x, cp2y)로 지정된 제어점을 사용하여 현재 위치와 주어진 끝점 사이에 3차 베지어 곡선을 추가합니다. 곡선이 추가된 후, 현재 위치는 곡선의 끝점(x, y)으로 업데이트됩니다. 다음 코드는 아래에 표시된 경로를 생성합니다:

ctx.strokeStyle = Qt.rgba(0, 0, 0, 1);
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(20, 0);//start point
ctx.bezierCurveTo(-10, 90, 210, 90, 180, 0);
ctx.stroke();

bezierCurveTo에 대한 W3C 2D 컨텍스트 표준 및 bezierCurveTo를 사용한 아름다운 꽃 데모도참조하십시오 .

Context2D clearRect(real x, real y, real w, real h)

(x, y, w, h)로 지정된 사각형 영역 내의 캔버스에 있는 모든 픽셀을 투명한 검은색으로 지웁니다.

Context2D clip()

현재 경로를 기반으로 클리핑 영역을 생성합니다. 클리핑 경로 밖에 있는 도형의 부분은 표시되지 않습니다. ` clip() ` 메서드를 사용하여 복잡한 도형을 생성하려면:

1. context.beginPath() 메서드를 호출하여 클리핑 경로를 설정합니다.
2. lineTo, arcTo, arc, moveTo 등의 메서드와 closePath 메서드를 자유롭게 조합하여 호출함으로써 클리핑 경로를 정의합니다.
3. context.clip() 메서드를 호출합니다.

새로운 도형이 표시됩니다. 다음은 클리핑 경로가 이미지 표시 방식을 어떻게 변경할 수 있는지 보여줍니다:

beginPath(), closePath(), stroke(), fill() 및 클립에 대한 W3C 2D 컨텍스트 표준도참조하십시오 .

Context2D closePath()

현재 하위 경로의 시작점으로 선을 그려 해당 하위 경로를 닫고, 자동으로 새로운 경로를 시작합니다. 새로운 경로의 현재 점은 이전 하위 경로의 첫 번째 점입니다.

closePath에 대해서는 W3C 2D 컨텍스트 표준을참조하십시오 .

CanvasGradient createConicalGradient(real x, real y, real angle)

중심점(x, y)을 중심으로 반시계 방향으로 색상을 보간하는 원뿔형 그라디언트를 나타내는 CanvasGradient 객체를 반환합니다. 시작 각도 angle 는 라디안 단위로 지정됩니다.

CanvasGradient::addColorStop(), createLinearGradient(), createRadialGradient(), createPattern(), fillStyle 및 strokeStyle도 참조하십시오 .

CanvasImageData createImageData(CanvasImageData imageData)

imageData 인자와 동일한 차원을 가진 CanvasImageData 객체를 생성합니다.

CanvasImageData createImageData(Url imageUrl)

imageUrl 에서 지정된 이미지를 불러와 CanvasImageData 객체를 생성합니다.

Canvas::loadImage(), QtQuick::Canvas::unloadImage(), QtQuick::Canvas::isImageLoaded도 참조하십시오 .

CanvasImageData createImageData(real sw, real sh)

지정된 치수(sw, sh)를 가진 CanvasImageData 객체를 생성합니다.

CanvasGradient createLinearGradient(real x0, real y0, real x1, real y1)

시작점(x0, y0)과 끝점(x1, y1) 사이의 선을 따라 색상이 변화하는 선형 그라디언트를 나타내는 ` CanvasGradient ` 객체를 반환합니다.

그라데이션은 색상 간의 부드러운 전환을 의미합니다. 그라데이션에는 선형과 방사형 두 가지 유형이 있습니다. 그라데이션에는 두 개 이상의 색상 정지점이 있어야 하며, 이는 그라데이션의 시작점과 끝점 또는 원 사이에서 0부터 1까지의 위치에 배치된 색상 변화를 나타냅니다.

CanvasGradient::addColorStop(), createRadialGradient(), createConicalGradient(), createPattern(), fillStyle 및 strokeStyle도 참조하십시오 .

variant createPattern(Image image, string repetition)

지정된 이미지를 사용하고, repetition 인자로 지정된 방향으로 반복되는 CanvasPattern 객체를 반환합니다.

image 매개변수는 유효한 Image 항목, 유효한 CanvasImageData 객체 또는 로드된 이미지 URL이어야 합니다. 이미지 데이터가 없는 경우, 이 함수는 INVALID_STATE_ERR 예외를 발생시킵니다.

repetition 에 허용되는 값은 다음과 같습니다:

반복 인수가 비어 있거나 null인 경우, "repeat" 값이 사용됩니다.

strokeStyle 및 fillStyle도 참조하십시오 .

variant createPattern(color color, enumeration patternMode)

이 함수는 오버로드된 함수입니다. 지정된 ` color ` 및 ` patternMode`을 사용하는 `CanvasPattern` 객체를 반환합니다. 유효한 패턴 모드는 다음과 같습니다:

Qt::BrushStyle도 참조하십시오 .

CanvasGradient createRadialGradient(real x0, real y0, real r0, real x1, real y1, real r1)

원점 (x0, y0)과 반지름 r0 을 갖는 시작 원과, 원점 (x1, y1)과 반지름 r1 을 갖는 끝 원을 기준으로 원뿔 모양을 따라 채워지는 방사형 그라디언트를 나타내는 CanvasGradient 객체를 반환합니다.

CanvasGradient::addColorStop(), createLinearGradient(), createConicalGradient(), createPattern(), fillStyle 및 strokeStyle도 참조하십시오 .

void drawImage(variant image, real dx, real dy)

지정된 ‘ image ’를 캔버스의 (dx, dy) 위치에 그립니다. 참고: ‘ image ’ 유형은 Image 항목, 이미지 URL 또는 CanvasImageData 객체일 수 있습니다. Image 항목으로 지정된 경우, 이미지가 완전히 로드되지 않았다면 이 메서드는 아무것도 그리지 않습니다. URL 문자열로 전달된 경우, 먼저 Canvas 항목의 Canvas::loadImage() 메서드를 호출하여 이미지를 로드해야 합니다. 그려지는 이 이미지는 현재 컨텍스트의 클립 경로의 영향을 받으며, 전달된 image 가 CanvasImageData 객체인 경우에도 마찬가지입니다.

CanvasImageData, Image, Canvas::loadImage, Canvas::isImageLoaded, Canvas::imageLoaded 및 drawImage에 대한 W3C 2D 컨텍스트 표준도참조하십시오 .

void drawImage(variant image, real dx, real dy, real dw, real dh)

이 함수는 오버로드된 함수입니다. 주어진 항목을 image 로 지정하여, 좌표 (dx, dy) 지점에 너비 dw, 높이 dh 로 캔버스에 그립니다.

참고: ` image ` 유형은 `Image` 항목, 이미지 URL 또는 ` CanvasImageData ` 객체일 수 있습니다. `Image` 항목으로 지정된 경우, 이미지가 완전히 로드되지 않았다면 이 메서드는 아무것도 그리지 않습니다. URL 문자열로 전달된 경우, 먼저 Canvas 항목의 Canvas::loadImage() 메서드를 호출하여 이미지를 불러와야 합니다. 그려지는 이 이미지는 현재 컨텍스트의 클립 경로의 영향을 받으며, 전달된 image 가 CanvasImageData 객체인 경우에도 마찬가지입니다.

CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded 및 drawImage에 대한 W3C 2D 컨텍스트 표준도참조하십시오 .

void drawImage(variant image, real sx, real sy, real sw, real sh, real dx, real dy, real dw, real dh)

이 함수는 오버로드된 함수입니다. 주어진 항목을 image 로 지정하여, 시작점 (sx, sy)과 시작 너비 sw, 시작 높이 sh 을 기준으로, 캔버스상의 (dx, dy) 지점에 너비 dw, 높이 dh 로 그립니다.

참고: ` image ` 유형은 `Image` 또는 `Canvas` 항목, 이미지 URL, 또는 ` CanvasImageData ` 객체일 수 있습니다. `Image` 항목으로 지정된 경우, 이미지가 완전히 로드되지 않았다면 이 메서드는 아무것도 그리지 않습니다. URL 문자열로 전달된 경우, 먼저 Canvas 항목의 Canvas::loadImage() 메서드를 호출하여 이미지를 로드해야 합니다. 이 이미지는 현재 컨텍스트의 클립 경로에 따라 그려지며, 전달된 image 가 CanvasImageData 객체인 경우에도 마찬가지입니다.

CanvasImageData, Image, Canvas::loadImage(), Canvas::isImageLoaded, Canvas::imageLoaded 및 drawImage에 대한 W3C 2D 컨텍스트 표준도참조하십시오 .

Context2D ellipse(real x, real y, real w, real h)

(x, y) 좌상단 모서리를 기준으로, 너비 w 및 높이 h 를 갖는 경계 사각형 내부에 타원을 생성하고, 이를 닫힌 하위 경로로 경로에 추가합니다.

이 타원은 0도(3시 방향)에서 시작하여 0도에서 끝나는 시계 방향 곡선으로 구성됩니다.

Context2D fill()

현재 채우기 스타일을 하위 경로에 적용합니다.

채우기에 대한 W3C 2D 컨텍스트 표준 및 fillStyle도 참조하십시오 .

Context2D fillRect(real x, real y, real w, real h)

fillStyle 를 사용하여 (x, y, w, h)로 지정된 직사각형 영역을 채색합니다.

fillStyle도 참조하십시오 .

Context2D fillText(text, x, y)

지정된 위치(x, y)에 지정된 text 를 채웁니다.

font, textAlign, textBaseline 및 strokeText항목도 참조하십시오 .

CanvasImageData getImageData(real x, real y, real w, real h)

(x, y, w, h)로 지정된 캔버스 사각형의 이미지 데이터를 포함하는 ` CanvasImageData ` 객체를 반환합니다.

[since QtQuick 2.11] array getLineDash()

선(line)의 대시 패턴을 나타내는 qreals 배열을 반환합니다.

이 메서드는 QtQuick 2.11에서 도입되었습니다.

setLineDash() 및 lineDashOffset도 참조하십시오 .

bool isPointInPath(real x, real y)

점 (x, y)이 현재 경로 내에 있으면 true 를 반환합니다.

isPointInPath에 대해서는 W3C 2D 컨텍스트 표준을참조하십시오 .

Context2D lineTo(real x, real y)

현재 위치에서 (x, y)에 있는 점까지 선을 그립니다.

var measureText(text)

width 속성을 가진 객체를 반환하며, 이 속성의 값은 현재 글꼴에서 지정된 text 을 인수로 사용하여 QFontMetrics::horizontalAdvance()을 호출한 결과와 동일합니다.

Context2D moveTo(real x, real y)

(x, y) 지점을 갖는 새로운 하위 경로를 생성합니다.

void putImageData(CanvasImageData imageData, real dx, real dy, real dirtyX, real dirtyY, real dirtyWidth, real dirtyHeight)

주어진 imageData 객체의 데이터를 (dx, dy) 위치의 캔버스에 그립니다.

더티 레크탱글(dirtyX, dirtyY, dirtyWidth, dirtyHeight)이 제공된 경우, 해당 레크탱글 내의 픽셀만 그려집니다.

Context2D quadraticCurveTo(real cpx, real cpy, real x, real y)

현재 점과 끝점(x, y) 사이에, (cpx, cpy)로 지정된 제어점을 갖는 2차 베지어 곡선을 추가합니다.

quadraticCurveTo에 대한 W3C 2D 컨텍스트 표준도 참조하십시오 .

Context2D rect(real x, real y, real w, real h)

(x, y) 위치에, 지정된 너비 w 와 높이 h 를 가진 사각형을 닫힌 부분 경로로 추가합니다.

Context2D reset()

컨텍스트 상태와 속성을 기본값으로 재설정합니다.

Context2D resetTransform()

변환 행렬을 기본값으로 재설정합니다( setTransform 를 호출하는 것과 동일함 (1, 0, 0, 1, 0, 0)).

transform(), setTransform() 및 reset()도 참조하십시오 .

Context2D restore()

스택의 맨 위 상태를 꺼내어, 해당 상태로 컨텍스트를 복원합니다.

save()도 참조하십시오 .

Context2D rotate(real angle)

캔버스를 현재 원점을 중심으로 라디안 단위의 angle 만큼 시계 방향으로 회전합니다.

ctx.rotate(Math.PI/2);

회전 변환 행렬은 다음과 같습니다:

여기서 회전 각도 angle 는 라디안 단위입니다.

Context2D roundedRect(real x, real y, real w, real h, real xRadius, real yRadius)

(x, y, w, h)로 지정된 모서리가 둥근 사각형을 경로에 추가합니다. xRadius 및 yRadius 인수는 모서리가 둥근 사각형의 모서리를 정의하는 타원의 반지름을 지정합니다.

Context2D save()

현재 상태를 상태 스택에 밀어 넣습니다.

상태 속성을 변경하기 전에, 나중에 참조할 수 있도록 현재 상태를 저장해야 합니다. 컨텍스트는 드로잉 상태 스택을 관리합니다. 각 상태는 현재 변환 행렬, 클리핑 영역 및 다음 속성의 값으로 구성됩니다:

• strokeStyle
• fillStyle
• fillRule
• globalAlpha
• lineWidth
• lineCap
• lineJoin
• miterLimit
• shadowOffsetX
• shadowOffsetY
• shadowBlur
• shadowColor
• globalCompositeOperation
• font
• textAlign
• textBaseline

현재 경로는 그리기 상태의 일부가 아닙니다. 경로는 ` beginPath()` 메서드를 호출하여 재설정할 수 있습니다.

Context2D scale(real x, real y)

현재 변환 행렬에 배율 계수를 곱하여 캔버스 그리드 내 각 유닛의 크기를 늘리거나 줄입니다. x 는 수평 방향의 배율 계수이며, y 는 수직 방향의 배율 계수입니다.

다음 코드는 캔버스에 그려진 객체의 가로 크기를 두 배로 늘리고 세로 크기를 절반으로 줄입니다:

ctx.scale(2.0, 0.5);

[since QtQuick 2.11] void setLineDash(array pattern)

대시 패턴을 지정된 패턴으로 설정합니다.

pattern 선과 간격을 번갈아 그리기 위한 간격을 지정하는 숫자 목록입니다.

배열의 요소 수가 홀수인 경우, 배열의 요소들이 복사되어 연결됩니다. 예를 들어, [5, 15, 25]는 [5, 15, 25, 5, 15, 25]가 됩니다.

var space = 4 ctx.setLineDash([1, space, 3, space, 9, space, 27, space, 9, space]) ... ctx.stroke();

이 메서드는 QtQuick 2.11에서 도입되었습니다.

getLineDash() 및 lineDashOffset도 참조하십시오 .

Context2D setTransform(real a, real b, real c, real d, real e, real f)

변환 행렬을 아래에 설명된 대로 인자로 지정된 행렬로 변경합니다.

변환 행렬을 직접 수정하면 크기 조정, 회전, 평행 이동을 한 번에 수행할 수 있습니다.

캔버스상의 각 점은 그림이 그려지기 전에 변환 행렬을 곱합니다. HTML Canvas 2D 컨텍스트 사양 에서는 변환 행렬을 다음과 같이 정의합니다:

여기서:

• a 는 수평(x) 방향의 확대/축소 계수이며

  

• c 는 x 방향의 기울기 계수

  

• e 는 x 방향의 평행 이동량입니다

  

• b 는 y(수직) 방향의 스큐 계수입니다.

  

• d 는 y 방향의 확대/축소 계수이다

  

• f 는 y 방향의 평행 이동량이다

  

• 마지막 행은 변하지 않습니다

확대/축소 계수와 비스듬한 변형 계수는 배수입니다. e 및 f 는 translate(x,y) 메서드의 단위와 마찬가지로 좌표계 단위입니다.

transform()도 참조하십시오 .

Context2D shear(real sh, real sv)

변환 행렬을 수평 방향으로는 sh, 수직 방향으로는 sv 만큼 잘라냅니다.

Context2D stroke()

현재 획 스타일을 사용하여 하위 경로를 그립니다.

strokeStyle 및 W3C 2D 컨텍스트 표준의 ‘stroke’항목도 참조하십시오 .

Context2D strokeRect(real x, real y, real w, real h)

(x, y, w, h)로 지정된 사각형의 경로를 strokeStyle, lineWidth, lineJoin 및 (해당되는 경우) miterLimit 속성을 사용하여 그립니다.

strokeStyle, lineWidth, lineJoin 및 miterLimit도 참조하십시오 .

Context2D strokeText(text, x, y)

(x, y)로 지정된 위치에서 주어진 text 을 그립니다.

font, textAlign, textBaseline 및 fillText도 참조하십시오 .

Context2D text(string text, real x, real y)

지정된 text 를, 제공된 현재 컨텍스트 글꼴을 기반으로 생성된 닫힌 하위 경로 집합으로 경로에 추가합니다.

이 하위 경로들은 텍스트의 기준선 왼쪽 끝이 (x, y)로 지정된 지점에 오도록 배치됩니다.

Context2D transform(real a, real b, real c, real d, real e, real f)

이 메서드는 setTransform()와 매우 유사하지만, 기존 변환 행렬을 대체하는 대신 주어진 변환 행렬을 현재 행렬에 곱하여 적용합니다.

setTransform() 메서드(a, b, c, d, e, f)는 실제로 현재 변환을 단위 행렬로 재설정한 다음, 동일한 인수를 사용하여 transform() 메서드(a, b, c, d, e, f)를 호출합니다.

setTransform()도 참조하십시오 .

Context2D translate(real x, real y)

캔버스의 원점을 좌표계 단위 기준으로 수평 방향으로 x, 수직 방향으로 y 만큼 이동시킵니다.

원점을 이동하면 각 도형에 대해 좌표를 일일이 수동으로 측정할 필요 없이 캔버스에 다양한 객체의 패턴을 그릴 수 있습니다.