Skip to content

D
Docs

OpenHarmony / Docs
1 年多 前同步成功

通知 159
Star 292
Fork 28
D
Docs
未验证 提交 2a9dfdb0 编写于 作者: O openharmony_ci 提交者： Gitee
浏览文件
操作

!17840 【ace_engine_standard部件】canvas API增强，基础接口能力补全（画布组件Matrix2D能力增强） 

Merge pull request !17840 from limeng/canvas_matrix2d
上级 06596530 1ab67fc2
隐藏空白更改
内联 并排
Showing with 698 addition and 19 deletion
zh-cn/application-dev/reference/arkui-ts/ts-canvasrenderingcontext2d.md
浏览文件 @ 2a9dfdb0
......@@ -40,9 +40,9 @@ RenderingContextSettings(antialias?: boolean)
| 名称 | 类型 | 描述 |
| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| [fillStyle](#fillstyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>- 类型为number时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [fillStyle](#fillstyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>- 类型为number时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>- 类型为number时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>- 类型为number时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>默认值：'butt'<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>默认值：'miter'<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>默认值：10<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
......@@ -1269,11 +1269,11 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
| image | [ImageBitmap](ts-components-canvas-imagebitmap.md) | 是 | 图源对象，具体参考ImageBitmap对象。 |
| repetition | string | 是 | 设置图像重复的方式，取值为：'repeat'、'repeat-x'、&nbsp'repeat-y'、'no-repeat'、'clamp'、'mirror'。<br/>默认值：'' |
**返回值：**：
**返回值：**
| 类型 | 说明 |
| ------------------------------- | ----------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例：**
......@@ -1886,6 +1886,12 @@ getTransform(): Matrix2D
从API version 9开始，该接口支持在ArkTS卡片中使用。
**返回值：**
| 类型 | 说明 |
| ----------------------------------------------------- | ---------- |
| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 矩阵对象。 |
### resetTransform
......@@ -2141,6 +2147,7 @@ setTransform方法使用的参数和transform()方法相同，但setTransform()
![zh-cn_image_0000001238712421](figures/zh-cn_image_0000001238712421.png)
### setTransform
setTransform(transform?: Matrix2D): void
......@@ -2148,6 +2155,11 @@ setTransform(transform?: Matrix2D): void
从API version 9开始，该接口支持在ArkTS卡片中使用。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| --------- | ----------------------------------------------------- | ---- | ------ | ---------- |
| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 否 | null | 变换矩阵。 |
### translate
......@@ -2899,9 +2911,3 @@ struct CanvasExample {
```
![zh-cn_image_0000001239032419](figures/zh-cn_image_0000001239032420.png)
## CanvasPattern
一个Object对象, 通过[createPattern](#createpattern)方法创建。
从API version 9开始，该接口支持在ArkTS卡片中使用。
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvaspattern.md 0 → 100644
浏览文件 @ 2a9dfdb0
# CanvasPattern
一个Object对象，使用[createPattern](ts-canvasrenderingcontext2d.md#createpattern)方法创建，通过指定图像和重复方式创建图片填充的模板。
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 方法
### setTransform
setTransform(transform?: Matrix2D): void
使用Matrix2D对象作为参数、对当前CanvasPattern进行矩阵变换。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| --------- | ----------------------------------------------------- | ---- | ------ | ---------- |
| transform | [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 否 | null | 转换矩阵。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct CanvasPatternPage {
private settings: RenderingContextSettings = new RenderingContextSettings(true)
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
private matrix: Matrix2D = new Matrix2D()
private img: ImageBitmap = new ImageBitmap("common/pattern.jpg")
private pattern : CanvasPattern
build() {
Column() {
Button("Click to set transform")
.onClick(() => {
this.matrix.scaleY = 1
this.matrix.scaleX = 1
this.matrix.translateX = 50
this.matrix.translateY = 200
this.pattern.setTransform(this.matrix)
this.context.fillRect(0, 0, 480, 720)
})
.width("45%")
.margin("5px")
Canvas(this.context)
.width('100%')
.height('80%')
.backgroundColor('#FFFFFF')
.onReady(() => {
this.pattern = this.context.createPattern(this.img, 'no-repeat')
this.context.fillStyle = this.pattern
this.matrix.scaleY = 0.5
this.matrix.scaleX = 0.5
this.matrix.translateX = 50
this.matrix.translateY = 50
this.pattern.setTransform(this.matrix)
this.context.fillRect(0, 0, 480, 720)
})
}
.width('100%')
.height('100%')
}
}
```
![CanvasPattern](./figures/canvas_pattern.gif)
zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-matrix2d.md 0 → 100644
浏览文件 @ 2a9dfdb0
# Matrix2D
矩阵对象，可以对矩阵进行缩放、旋转、平移等变换。
> **说明：**
>
> 从 API Version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
## 接口
Matrix2D()
从API version 9开始，该接口支持在ArkTS卡片中使用。
## 属性
| 属性 | 类型 | 描述 |
| ------------------------- | ------ | ------------------------------------------------------------ |
| [scaleX](#scalex) | number | 水平缩放系数。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [scaleY](#scaley) | number | 垂直缩放系数。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [rotateX](#rotatex) | number | 水平倾斜系数。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [rotateY](#rotatey) | number | 垂直倾斜系数。从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [translateX](#translatex) | number | 水平平移距离，单位为vp。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [translateY](#translatey) | number | 垂直平移距离，单位为vp。 从API version 9开始，该接口支持在ArkTS卡片中使用。 |
> **说明：**
>
> 可使用[px2vp](ts-pixel-units.md)接口进行单位转换。
### scaleX
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DScaleX {
@State message: string = 'Matrix2D ScaleX'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set scaleX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### scaleY
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DScaleY {
@State message: string = 'Matrix2D ScaleY'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set scaleY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleY = 1
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### rotateX
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DRotateX {
@State message: string = 'Matrix2D RotateX'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set rotateX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.rotateX = Math.sin(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### rotateY
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DRotateY {
@State message: string = 'Matrix2D RotateY'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set rotateY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.rotateY = Math.cos(45 / Math.PI)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### translateX
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DTranslateX {
@State message: string = 'Matrix2D TranslateX'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set translateX")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.translateX = 10
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### translateY
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DTranslateY {
@State message: string = 'Matrix2D TranslateY'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("Set translateY")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.translateY = 10
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
## 方法
### identity
identity(): Matrix2D
创建一个单位矩阵。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**返回值：**
| 类型 | 说明 |
| --------------------- | ---------- |
| [Matrix2D](#matrix2d) | 单位矩阵。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DIdentity {
@State message: string = 'Matrix2D Identity'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix identity")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix = matrix.identity()
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### invert
invert(): Matrix2D
得到当前矩阵的逆矩阵。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**返回值：**
| 类型 | 说明 |
| --------------------- | ------------ |
| [Matrix2D](#matrix2d) | 逆矩阵结果。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DInvert {
@State message: string = 'Matrix2D Invert'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix invert")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 2
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 10
matrix.translateY = 20
matrix.invert()
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### multiply<sup>(deprecated) </sup>
multiply(other?: Matrix2D): Matrix2D
当前矩阵与目标矩阵相乘。
从API version 9开始，该接口支持在ArkTS卡片中使用。该接口为空接口。
该接口从API version 10开始废弃。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ----- | -------- | ---- | ------ | ---------- |
| other | Matrix2D | 否 | null | 目标矩阵。 |
**返回值：**
| 类型 | 说明 |
| --------------------- | -------------- |
| [Matrix2D](#matrix2d) | 相乘结果矩阵。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DMultiply {
@State message: string = 'Matrix2D Multiply'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix multiply")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
var other: Matrix2D = new Matrix2D()
other.scaleX = 2
other.scaleY = 2
other.rotateX = 0
other.rotateY = 0
other.translateX = 10
other.translateY = 10
other.multiply(other)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### rotate<sup>10+</sup>
rotate(degree: number, rx?: number, ry?: number): Matrix2D
以旋转点为中心、对当前矩阵进行右乘旋转运算。
从API version 10开始，该接口支持在ArkTS卡片中使用。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ------ | ------ | ---- | ------ | ------------------------------------------------------------ |
| degree | number | 是 | 0 | 旋转角度，单位为弧度。顺时针方向为正角度，可以通过Math.PI&nbsp;/&nbsp;180将角度转换为弧度值。 |
| rx | number | 否 | 0 | 旋转点的水平方向坐标，单位为vp。 |
| ry | number | 否 | 0 | 旋转点的垂直方向坐标，单位为vp。 |
**返回值：**
| 类型 | 说明 |
| --------------------- | -------------------- |
| [Matrix2D](#matrix2d) | 旋转后结果矩阵对象。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DRotate {
@State message: string = 'Matrix2D Rotate'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix rotate")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.rotate(90 / Math.PI, 10, 10)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### translate
translate(tx?: number, ty?: number): Matrix2D
对当前矩阵进行左乘平移运算。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ------ | ---------------------------- |
| tx | number | 否 | 0 | 水平方向平移距离，单位为vp。 |
| ty | number | 否 | 0 | 垂直方向平移距离，单位为vp。 |
**返回值：**
| 类型 | 说明 |
| --------------------- | -------------------- |
| [Matrix2D](#matrix2d) | 平移后结果矩阵对象。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DTranslate {
@State message: string = 'Matrix2D Translate'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix translate")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.translate(100, 100)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
### scale
scale(sx?: number, sy?: number): Matrix2D
对当前矩阵进行右乘缩放运算。
从API version 9开始，该接口支持在ArkTS卡片中使用。
**参数：**
| 参数 | 类型 | 必填 | 默认值 | 描述 |
| ---- | ------ | ---- | ------ | ------------------ |
| sx | number | 否 | 1 | 水平缩放比例系数。 |
| sy | number | 否 | 1 | 垂直缩放比例系数。 |
**返回值：**
| 类型 | 说明 |
| --------------------- | ------------------ |
| [Matrix2D](#matrix2d) | 缩放结果矩阵对象。 |
**示例：**
```ts
// xxx.ets
@Entry
@Component
struct Matrix2DScale {
@State message: string = 'Matrix2D Scale'
printMatrix(title, matrix) {
console.log(title)
console.log("Matrix [scaleX = " + matrix.scaleX + ", scaleY = " + matrix.scaleY +
", rotateX = " + matrix.rotateX + ", rotateY = " + matrix.rotateY +
", translateX = " + matrix.translateX + ", translateY = " + matrix.translateY + "]")
}
build() {
Row() {
Column() {
Text(this.message)
.fontSize(20)
.fontWeight(FontWeight.Bold)
Button("matrix scale")
.onClick(() => {
var matrix : Matrix2D = new Matrix2D()
matrix.scaleX = 1
matrix.scaleY = 1
matrix.rotateX = 0
matrix.rotateY = 0
matrix.translateX = 0
matrix.translateY = 0
matrix.scale(0.5, 0.5)
this.printMatrix(this.message, matrix)
})
}
.width('100%')
}
.height('100%')
}
}
```
zh-cn/application-dev/reference/arkui-ts/ts-offscreencanvasrenderingcontext2d.md
浏览文件 @ 2a9dfdb0
......@@ -27,9 +27,9 @@ OffscreenCanvasRenderingContext2D(width: number, height: number, settings?: Rend
| 名称 | 类型 | 描述 |
| ----------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
| [fillStyle](#fillstyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>- 类型为number时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [fillStyle](#fillstyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 指定绘制的填充色。<br/>-&nbsp;类型为string时，表示设置填充区域的颜色。<br/>- 类型为number时，表示设置填充区域的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [lineWidth](#linewidth) | number | 设置绘制线条的宽度。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>- 类型为number时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [strokeStyle](#strokestyle) | string&nbsp;\|number<sup>10+</sup>&nbsp;\|[CanvasGradient](ts-components-canvas-canvasgradient.md)&nbsp;\|&nbsp;[CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 设置描边的颜色。<br/>-&nbsp;类型为string时，表示设置描边使用的颜色。<br/>- 类型为number时，表示设置描边使用的颜色。<br/>-&nbsp;类型为CanvasGradient时，表示渐变对象，使用[createLinearGradient](#createlineargradient)方法创建。<br/>-&nbsp;类型为CanvasPattern时，使用[createPattern](#createpattern)方法创建。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [lineCap](#linecap) | CanvasLineCap | 指定线端点的样式，可选值为：<br/>-&nbsp;'butt'：线端点以方形结束。<br/>-&nbsp;'round'：线端点以圆形结束。<br/>-&nbsp;'square'：线端点以方形结束，该样式下会增加一个长度和线段厚度相同，宽度是线段厚度一半的矩形。<br/>-&nbsp;默认值：'butt'。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [lineJoin](#linejoin) | CanvasLineJoin | 指定线段间相交的交点样式，可选值为：<br/>-&nbsp;'round'：在线段相连处绘制一个扇形，扇形的圆角半径是线段的宽度。<br/>-&nbsp;'bevel'：在线段相连处使用三角形为底填充，&nbsp;每个部分矩形拐角独立。<br/>-&nbsp;'miter'：在相连部分的外边缘处进行延伸，使其相交于一点，形成一个菱形区域，该属性可以通过设置miterLimit属性展现效果。<br/>-&nbsp;默认值：'miter'。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
| [miterLimit](#miterlimit) | number | 设置斜接面限制值，该值指定了线条相交处内角和外角的距离。 <br/>-&nbsp;默认值：10。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 |
......@@ -1280,7 +1280,7 @@ createPattern(image: ImageBitmap, repetition: string | null): CanvasPattern | nu
| 类型 | 说明 |
| ------------------------------- | ----------------------- |
| [CanvasPattern](#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
| [CanvasPattern](ts-components-canvas-canvaspattern.md#canvaspattern) | 通过指定图像和重复方式创建图片填充的模板对象。 |
**示例：**
......@@ -1925,6 +1925,11 @@ getTransform(): Matrix2D
从API version 9开始，该接口支持在ArkTS卡片中使用。
**返回值：**
| 类型 | 说明 |
| ----------------------------------------------------- | ---------- |
| [Matrix2D](ts-components-canvas-matrix2d.md#Matrix2D) | 矩阵对象。 |
### resetTransform
......@@ -3000,9 +3005,3 @@ struct OffscreenCanvasConicGradientPage {
```
![zh-cn_image_0000001239032419](figures/zh-cn_image_0000001239032420.png)
## CanvasPattern
一个Object对象, 通过[createPattern](#createpattern)方法创建。
从API version 9开始，该接口支持在ArkTS卡片中使用。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或