HarmonyOS ohos.graphics.drawing (绘制模块)中Path.arcTo有例子可以参考吗?

​文档中Path.arcTo(x1: number, y1: number, x2: number, y2: number, startDeg: number, sweepDeg: number): void只有文字描述,没有代码示例对应的效果图,文字描述得难以理解。文档链接:​https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-graphics-drawing-V5#ZH-CN_TOPIC_0000001847209028__arcto

Path2D中的arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): void定义与上面这个Path.arcTo完全不同,且有代码对应的效果图。文档链接:​https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-components-canvas-path2d-V5#ZH-CN_TOPIC_0000001893369521__arcto

Path.arcTo能给示例代码和对应的效果图吗?

咨询场景描述:裁剪页用的Path2D.arcTo绘制圆角,搜题结果页绘制裁剪框圆角,在renderNode中只能获取到new drawing.Path(),这个path绘制圆角时,发现接口参数定义和Path2D.arcTo完全不一样,且只有文字描述没有对应效果图,文字描述难以理解。​

HarmonyOS
2024-11-22 11:11:15
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
fox280
import { RenderNode, DrawContext, FrameNode, NodeController } from "@ohos.ArkUI.node" 
import drawing from "@ohos.graphics.drawing" 
 
class TextRenderNode extends RenderNode { 
  async draw(context: DrawContext) { 
    const canvas = context.canvas; 
    const pen = new drawing.Pen(); 
    pen.setStrokeWidth(5); 
    pen.setColor({alpha: 255, red: 255, green: 0, blue: 0}); 
    let path = new drawing.Path(); 
    // path.moveTo(10,10); 
    path.arcTo(10, 10, 200, 200, 0, 270); 
    // path.close(); 
    canvas.attachPen(pen); 
    canvas.drawPath(path); 
    canvas.detachPen(); 
  } 
} 
 
class MyNodeController extends NodeController { 
  private rootNode: FrameNode | null = null; 
  private nodeArray: Array<TextRenderNode> = [] 
  addMyNode(item:TextRenderNode){ 
    this.nodeArray.push(item) 
  } 
 
  makeNode(uiContext: UIContext): FrameNode | null { 
    this.rootNode = new FrameNode(uiContext); 
    const renderNode = this.rootNode.getRenderNode(); 
    if (renderNode === null) { 
      return this.rootNode; 
    } 
    if (renderNode) { 
      renderNode.clearChildren() 
      this.nodeArray.forEach((item) => { 
        renderNode.appendChild(item) 
      }) 
    } 
    return this.rootNode; 
  } 
} 
 
@Entry 
@Component 
struct Index { 
  @State newNode:TextRenderNode = new TextRenderNode(); 
  @State nodeCV:MyNodeController = new MyNodeController() 
  tempY = 0 
  build() { 
    Column() { 
      Column() { 
        NodeContainer(this.nodeCV) 
          .width('100%') 
          .height(200) 
        Button('Invalidate') 
          .onClick(() => { 
            let newNode = new TextRenderNode() 
            newNode.frame = { x: 0, y: this.tempY, width: 200, height: 100 } 
            this.nodeCV.addMyNode(newNode) 
            this.nodeCV.rebuild() 
            this.tempY += 100 
          }) 
      } 
      .width('100%') 
      .height('100%') 
    } 
    .height('100%') 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
分享
微博
QQ
微信
回复
2024-11-22 16:45:21
相关问题
HarmonyOS rcp模块使用例子
585浏览 • 1回复 待解决
使用Drawing进行2d图像绘制
1827浏览 • 1回复 待解决
使用Drawing实现图形绘制与显示
1810浏览 • 1回复 待解决
Path组件绘制的线条粗细不一致
2658浏览 • 1回复 待解决