diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/canvas_drawingRenderingContext.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/canvas_drawingRenderingContext.png index 66109632d3a029019328c5a039acfd07c8b89533..ecb8410e2debcdf6433eaa2aac8c8f5565265ff4 100644 Binary files a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/canvas_drawingRenderingContext.png and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/canvas_drawingRenderingContext.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/canvas_drawingRenderingContextClear.png b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/canvas_drawingRenderingContextClear.png new file mode 100644 index 0000000000000000000000000000000000000000..858a46712da7a44ca9eb799f59a03f3a3cc302df Binary files /dev/null and b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/figures/canvas_drawingRenderingContextClear.png differ diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md index cbf0676e4215b1d5f695000f8bdcc4670813c679..521ab5d632a003908c05e9898cf85b811e968822 100755 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md @@ -8,10 +8,10 @@ > > 本文绘制接口在调用时会存入被关联的Canvas组件的指令队列中。仅当当前帧进入渲染阶段且关联的Canvas组件处于可见状态时，这些指令才会从队列中被提取并执行。因此，在Canvas组件不可见的情况下，应尽量避免频繁调用绘制接口，以防止指令在队列中堆积，从而避免内存占用过大的问题。 > +> [beginPath](#beginpath)、[moveTo](#moveto)、[lineTo](#lineto)、[closePath](#closepath)、[bezierCurveTo](#beziercurveto)、[quadraticCurveTo](#quadraticcurveto)、[arc](#arc)、[arcTo](#arcto)、[ellipse](#ellipse)和[rect](#rect)接口只能对CanvasRenderingContext2D中的路径生效，无法对[OffscreenCanvasRenderingContext2D](./ts-offscreencanvasrenderingcontext2d.md)和[Path2D](./ts-components-canvas-path2d.md)对象中设置的路径生效。 +> > Canvas组件的宽或高超过8000px时使用CPU渲染，会导致性能明显下降。 - - ## 接口 CanvasRenderingContext2D(settings?: RenderingContextSettings, unit?: LengthMetricsUnit) diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-components-canvas-path2d.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-components-canvas-path2d.md index 846427ee827ecb0a22a006f0e241ea88597eb998..5fc7018e5bc1dc8ed3b175a78d9bb7fff45806cc 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-components-canvas-path2d.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-components-canvas-path2d.md @@ -5,6 +5,8 @@ > **说明：** > > 从 API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> Path2D对象的方法无法对[CanvasRenderingContext2D](./ts-canvasrenderingcontext2d.md)和[OffscreenCanvasRenderingContext2D](./ts-offscreencanvasrenderingcontext2d.md)对象中设置的路径生效。 ## 接口 diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-components-offscreencanvas.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-components-offscreencanvas.md index a2941aea99f1c9a0ab8c9e7e8cd33c6b5680c5b1..215936e86b12b23803c21f261ec03cdb9cf42da6 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-components-offscreencanvas.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-components-offscreencanvas.md @@ -7,6 +7,8 @@ OffscreenCanvas组件用于绘制自定义图形。 > **说明：** > > 该组件从API version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 +> +> OffscreenCanvas无法在ServiceExtensionAbility中使用，ServiceExtensionAbility中建议使用[Drawing模块](../../apis-arkgraphics2d/js-apis-graphics-drawing.md)进行离屏绘制。 ## 子组件 diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-drawingrenderingcontext.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-drawingrenderingcontext.md index 622f151107dcd8d161233127dde156f026c237d9..ff086388b5560d213e0c1dcd0966543c1d89304a 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-drawingrenderingcontext.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-drawingrenderingcontext.md @@ -59,6 +59,8 @@ invalidate(): void 该示例实现了如何使用DrawingRenderingContext中的方法进行绘制。 ```ts +import { common2D, drawing } from '@kit.ArkGraphics2D'; + // xxx.ets @Entry @Component @@ -69,11 +71,35 @@ struct CanvasExample { Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { Canvas(this.context) .width('100%') - .height('100%') - .backgroundColor('#ffff00') + .height('50%') + .backgroundColor('#D5D5D5') .onReady(() => { - this.context.canvas.drawCircle(200, 200, 100) - this.context.invalidate() + let brush = new drawing.Brush(); + // 使用RGBA(39, 135, 217, 255)填充圆心为(200, 200)，半径为100的圆 + brush.setColor({ + alpha: 255, + red: 39, + green: 135, + blue: 217 + }); + this.context.canvas.attachBrush(brush); + this.context.canvas.drawCircle(200, 200, 100); + this.context.canvas.detachBrush(); + this.context.invalidate(); + }) + Button("Clear") + .width('120') + .height('50') + .onClick(() => { + let color: common2D.Color = { + alpha: 0, + red: 0, + green: 0, + blue: 0 + }; + // 使用RGBA(0, 0, 0, 0)填充画布 + this.context.canvas.clear(color); + this.context.invalidate(); }) } .width('100%') @@ -81,4 +107,11 @@ struct CanvasExample { } } ``` - ![zh-cn_image_0000001194032666](figures/canvas_drawingRenderingContext.png) + +图1 绘制圆心为(200, 200)，半径为100的圆，填充色为RGBA(39, 135, 217, 255) + + ![canvas_drawingRenderingContext](figures/canvas_drawingRenderingContext.png) + +图2 点击Clear按钮清空画布 + + ![canvas_drawingRenderingContextClear](figures/canvas_drawingRenderingContextClear.png) diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-media-components-video.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-media-components-video.md index 60cefc5692ab5f6f1949de2aa1cc0c59fda39e9a..f969092d05cb28cc4948b4e5066f801ba2cb1d02 100755 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-media-components-video.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-media-components-video.md @@ -6,7 +6,7 @@ > > 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
> Video组件只提供简单的视频播放功能，无法支撑复杂的视频播控场景。复杂开发场景推荐使用[AVPlayer](../../apis-media-kit/js-apis-media.md#avplayer9)播控API和[XComponent](ts-basic-components-xcomponent.md)组件开发。
-> Video组件在使用expandSafeAre扩展到安全区域时，组件视频显示内容区域不支持扩展。 +> Video组件在使用expandSafeArea扩展到安全区域时，组件视频显示内容区域不支持扩展。 ## 权限列表 diff --git a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-offscreencanvasrenderingcontext2d.md b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-offscreencanvasrenderingcontext2d.md index 2774a1805e68a7bf9f2f1f8f8c599b7c24a17067..218a295515b1ea8d0db8549562da42dac7b573d5 100644 --- a/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-offscreencanvasrenderingcontext2d.md +++ b/zh-cn/application-dev/reference/apis-arkui/arkui-ts/ts-offscreencanvasrenderingcontext2d.md @@ -5,8 +5,10 @@ > **说明：** > > 从 API version 8 开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 - - +> +> OffscreenCanvasRenderingContext2D无法在ServiceExtensionAbility中使用，ServiceExtensionAbility中建议使用[Drawing模块](../../apis-arkgraphics2d/js-apis-graphics-drawing.md)进行离屏绘制。 +> +> [beginPath](#beginpath)、[moveTo](#moveto)、[lineTo](#lineto)、[closePath](#closepath)、[bezierCurveTo](#beziercurveto)、[quadraticCurveTo](#quadraticcurveto)、[arc](#arc)、[arcTo](#arcto)、[ellipse](#ellipse)和[rect](#rect)接口只能对OffscreenCanvasRenderingContext2D中的路径生效，无法对[CanvasRenderingContext2D](./ts-canvasrenderingcontext2d.md)和[Path2D](./ts-components-canvas-path2d.md)对象中设置的路径生效。 ## 接口 diff --git a/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md b/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md index 00a307739b0894360d14964841e321e782bca0a3..2651cefa12cf218edccf25e0e0d757bfd99c7ff3 100644 --- a/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md +++ b/zh-cn/application-dev/ui/arkts-drawing-customization-on-canvas.md @@ -152,7 +152,7 @@ Canvas(this.context) OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供了大量的属性和方法，可以用来绘制文本、图形，处理像素等，是Canvas组件的核心。常用接口有[fill](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#fill)（对封闭路径进行填充）、[clip](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#clip)（设置当前路径为剪切路径）、[stroke](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#stroke)（进行边框绘制操作）等等，同时提供了[fillStyle](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#fillstyle)（指定绘制的填充色）、[globalAlpha](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#globalalpha)（设置透明度）与[strokeStyle](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#strokestyle)（设置描边的颜色）等属性修改绘制内容的样式。将通过以下几个方面简单介绍画布组件常见使用方法： -- 基础形状绘制。 +- 绘制基础形状。 可以通过[arc](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#arc)（绘制弧线路径）、 [ellipse](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#ellipse)（绘制一个椭圆）、[rect](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#rect)（创建矩形路径）等接口绘制基础形状。 ```ts @@ -178,7 +178,7 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供 ![2023022794521(1)](figures/2023022794521(1).jpg) -- 文本绘制。 +- 绘制文本。 可以通过[fillText](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#filltext)（文本填充）、[strokeText](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#stroketext)（文本描边）等接口进行文本绘制，示例中设置了font为50像素高加粗的"sans-serif"字体，然后调用fillText方法在(50, 100)处绘制文本"Hello World!"，设置strokeStyle为红色，lineWidth为2，font为50像素高加粗的"sans-serif"字体，然后调用strokeText方法在(50, 150)处绘制文本"Hello World!"的轮廓。 @@ -201,6 +201,50 @@ OffscreenCanvasRenderingContext2D对象和CanvasRenderingContext2D对象提供 ![2023022795105(1)](figures/2023022795105(1).jpg) +- 绘制文本边框。 + + 可以通过[measureText](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#measuretext)（文本测量）计算绘制文本的宽度和高度，使用测量的宽度和高度作为边框的尺寸。在示例中，设置textBaseline为'top'，font为30像素的"monospace"字体，通过measureText测量出文本的宽度和高度，然后调用fillText方法在(20, 100)处绘制文本"Hello World!"，并调用strokeRect方法在同一位置使用测量的宽度和高度绘制相应尺寸的边框。接着，设置font为60像素的粗体"sans-serif"字体，再次通过measureText测量文本的宽度和高度，接着调用fillText方法在(20, 150)处绘制文本"Hello World!"，并调用strokeRect方法在同一位置使用测量的宽度和高度绘制对应尺寸的边框。 + + ```ts + // xxx.ets + @Entry + @Component + struct measureTextAndRect { + drawText: string = "Hello World" + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + + build() { + Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { + Canvas(this.context) + .width('100%') + .height('100%') + .backgroundColor('#F5DC62') + .onReady(() => { + // 文本的水平对齐方式为'top' + this.context.textBaseline = 'top' + // 文本字号为30px，字体系列为monospace + this.context.font = '30px monospace' + let textWidth = this.context.measureText(this.drawText).width + let textHeight = this.context.measureText(this.drawText).height + this.context.fillText(this.drawText, 20, 100) + this.context.strokeRect(20, 100, textWidth, textHeight) + // 文本字体粗细为粗体，字号为60px，字体系列为sans-serif + this.context.font = 'bold 60px sans-serif' + textWidth = this.context.measureText(this.drawText).width + textHeight = this.context.measureText(this.drawText).height + this.context.fillText(this.drawText, 20, 150) + this.context.strokeRect(20, 150, textWidth, textHeight) + }) + } + .width('100%') + .height('100%') + } + } + ``` + + ![measureTextAndRect](figures/measureTextAndRect.png) + - 绘制图片和图像像素信息处理。 可以通过[drawImage](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#drawimage)（图像绘制）、[putImageData](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#putimagedata)（使用[ImageData](../reference/apis-arkui/arkui-ts/ts-components-canvas-imagedata.md)数据填充新的矩形区域）等接口绘制图片，通过[createImageData](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#createimagedata)（创建新的ImageData 对象）、[getPixelMap](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#getpixelmap)（以当前canvas指定区域内的像素创建[PixelMap](../reference/apis-image-kit/js-apis-image.md#pixelmap7)对象）、[getImageData](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#getimagedata)（以当前canvas指定区域内的像素创建ImageData对象）等接口进行图像像素信息处理。 @@ -307,7 +351,7 @@ struct CanvasContentUpdate { ## 场景示例 -- 规则基础形状绘制。 +- 绘制规则基础形状。 ```ts @Entry @@ -339,7 +383,7 @@ struct CanvasContentUpdate { ![2023022701120(1)](figures/2023022701120(1).jpg) -- 不规则图形绘制。 +- 绘制不规则图形。 ```ts @Entry @@ -379,6 +423,199 @@ struct CanvasContentUpdate { ![2023032422159](figures/2023032422159.jpg) +- 绘制可拖动的光标。 + + 可以通过[beginPath](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#beginpath)、[moveTo](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#moveto)、[lineTo](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#lineto)和[arc](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#arc)方法设置光标的位置，使用[stroke](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#stroke)和[fill](../reference/apis-arkui/arkui-ts/ts-canvasrenderingcontext2d.md#fill)方法绘制光标，将是否按下和位置变化通过@Watch监听，并绑定自定义的drawCursor()方法。当拖动光标时，@Watch绑定的方法会执行绘制逻辑，计算并更新光标的颜色和位置。 + + ```ts + @Entry + @Component + struct CursorMoving { + // 监听是否按下，刷新光标颜色 + @State @Watch('drawCursor') isTouchDown: boolean = false + // 监听位置变化，刷新页面 + @State @Watch('drawCursor') cursorPosition: RectPosition = { + x: 0, + y: 0, + width: 0, + height: 0, + } + private settings: RenderingContextSettings = new RenderingContextSettings(true); + private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings); + private sw: number = 360; // Canvas固定宽度 + private sh: number = 270; // Canvas固定高度 + private cursorWH: number = 50; // 光标区域宽高 + private dashedLineW: number = 7; // 光标宽高 + private arcRdius: number = 6; // 光标宽高 + private isReadyMove: boolean = false + private touchPosition: Position = { + x: 0, + y: 0, + }; + private cursorCenterPosition: Position = { + x: 0, + y: 0, + }; + + build() { + Column() { + // 绘制光标 + Canvas(this.canvasContext) + .width(this.sw) + .height(this.sh) + .backgroundColor('#D5D5D5') + .onReady(() => { + this.cursorPosition.x = (this.sw - this.cursorWH) / 2 + this.cursorPosition.y = (this.sh - this.cursorWH) / 2 + this.cursorPosition.width = this.cursorWH + this.cursorPosition.height = this.cursorWH + this.cursorCenterPosition = { + x: this.cursorPosition.x + this.cursorPosition.width / 2, + y: this.cursorPosition.y + this.cursorPosition.width / 2 + } + this.drawCursor() + }) + .onTouch(event => { + if (event.type === TouchType.Down) { + this.isReadyMove = this.isTouchCursorArea(event.touches[0]); + if (this.isReadyMove) { + this.isTouchDown = true + } + + this.touchPosition = { + x: event.touches[0].displayX, + y: event.touches[0].displayY + } + } else if (event.type === TouchType.Move) { + if (this.isReadyMove) { + let moveX = event.changedTouches[0].displayX - this.touchPosition.x; + let moveY = event.changedTouches[0].displayY - this.touchPosition.y; + this.touchPosition = { + x: event.changedTouches[0].displayX, + y: event.changedTouches[0].displayY + } + this.cursorPosition.x += moveX; + this.cursorPosition.y += moveY; + + this.cursorCenterPosition = { + x: this.cursorPosition.x + this.cursorPosition.width / 2, + y: this.cursorPosition.y + this.cursorPosition.width / 2 + } + // 光标区域中心点位置限制 + if (this.cursorCenterPosition.x < 0) { + this.cursorPosition.x = -this.cursorPosition.width / 2 + } + if (this.cursorCenterPosition.y < 0) { + this.cursorPosition.y = -this.cursorPosition.height / 2 + } + if (this.cursorCenterPosition.x > this.sw) { + this.cursorPosition.x = this.sw - this.cursorPosition.width / 2 + } + if (this.cursorCenterPosition.y > this.sh) { + this.cursorPosition.y = this.sh - this.cursorPosition.height / 2 + } + } + } else { + this.isTouchDown = false + } + }) + } + .height('100%') + .width('100%') + .justifyContent(FlexAlign.Center) + } + + // 绘制裁剪框 + drawCursor() { + // 算出菱形四个点 + let positionL: Position = { x: this.cursorPosition.x, y: this.cursorPosition.y + this.cursorPosition.height / 2 } + let positionT: Position = { x: this.cursorPosition.x + this.cursorPosition.width / 2, y: this.cursorPosition.y } + let positionR: Position = { + x: this.cursorPosition.x + this.cursorPosition.width, + y: this.cursorPosition.y + this.cursorPosition.height / 2 + } + let positionB: Position = { + x: this.cursorPosition.x + this.cursorPosition.width / 2, + y: this.cursorPosition.y + this.cursorPosition.height + } + let lineWidth = 2 + this.canvasContext.clearRect(0, 0, this.sw, this.sh); + this.canvasContext.lineWidth = lineWidth + this.canvasContext.strokeStyle = this.isTouchDown ? '#ff1a5cae' : '#ffffffff' + + // 画出四角 + this.canvasContext.beginPath() + this.canvasContext.moveTo(positionL.x + this.dashedLineW, positionL.y - this.dashedLineW); + this.canvasContext.lineTo(positionL.x, positionL.y); + this.canvasContext.lineTo(positionL.x + this.dashedLineW, positionL.y + this.dashedLineW); + + this.canvasContext.moveTo(positionT.x - this.dashedLineW, positionT.y + this.dashedLineW); + this.canvasContext.lineTo(positionT.x, positionT.y); + this.canvasContext.lineTo(positionT.x + this.dashedLineW, positionT.y + this.dashedLineW); + + this.canvasContext.moveTo(positionR.x - this.dashedLineW, positionR.y - this.dashedLineW); + this.canvasContext.lineTo(positionR.x, positionR.y); + this.canvasContext.lineTo(positionR.x - this.dashedLineW, positionR.y + this.dashedLineW); + + this.canvasContext.moveTo(positionB.x - this.dashedLineW, positionB.y - this.dashedLineW); + this.canvasContext.lineTo(positionB.x, positionB.y); + this.canvasContext.lineTo(positionB.x + this.dashedLineW, positionB.y - this.dashedLineW); + + this.canvasContext.stroke() + + // 画出中心圆 + this.canvasContext.beginPath() + this.canvasContext.strokeStyle = this.isTouchDown ? '#ff1a5cae' : '#ff9ba59b' + this.canvasContext.fillStyle = this.isTouchDown ? '#ff1a5cae' : '#ff9ba59b' + this.canvasContext.arc(this.cursorPosition.x + this.cursorPosition.width / 2, + this.cursorPosition.y + this.cursorPosition.width / 2, this.arcRdius, 0, 2 * Math.PI) + this.canvasContext.fill() + this.canvasContext.stroke() + + // 画出四条线 + this.canvasContext.beginPath(); + this.canvasContext.lineWidth = 0.7; + this.canvasContext.moveTo(positionL.x, positionL.y); + this.canvasContext.lineTo(0, positionL.y); + + this.canvasContext.moveTo(positionT.x, positionT.y); + this.canvasContext.lineTo(positionT.x, 0); + + this.canvasContext.moveTo(positionR.x, positionR.y); + this.canvasContext.lineTo(this.sw, positionR.y); + + this.canvasContext.moveTo(positionB.x, positionB.y); + this.canvasContext.lineTo(positionB.x, this.sh); + + this.canvasContext.stroke(); + } + + // 判断点击位置是否在棱形中 + isTouchCursorArea(touch: TouchObject) { + let tempLength = Math.sqrt((touch.x - this.cursorCenterPosition.x) * (touch.x - this.cursorCenterPosition.x) + + (touch.y - this.cursorCenterPosition.y) * (touch.y - this.cursorCenterPosition.y)) + if (tempLength < (this.cursorWH / 2 / 1.414)) { + return true + } + return false + } + } + + export interface RectPosition { + x: number; + y: number; + height: number; + width: number; + } + + export interface Position { + x: number; + y: number; + } + ``` + + ![CursorMoving](./figures/CursorMoving.gif) + ## 相关实例 使用画布绘制自定义图形，有以下相关实例可供参考： diff --git a/zh-cn/application-dev/ui/figures/CursorMoving.gif b/zh-cn/application-dev/ui/figures/CursorMoving.gif new file mode 100644 index 0000000000000000000000000000000000000000..5dd34d5278f11cdc4cb09f445e9d332022ae50fb Binary files /dev/null and b/zh-cn/application-dev/ui/figures/CursorMoving.gif differ diff --git a/zh-cn/application-dev/ui/figures/measureTextAndRect.png b/zh-cn/application-dev/ui/figures/measureTextAndRect.png new file mode 100644 index 0000000000000000000000000000000000000000..2e3a9ed0b6ba80e2fb75633c523e05d27eb1f0df Binary files /dev/null and b/zh-cn/application-dev/ui/figures/measureTextAndRect.png differ