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
9h前
浏览
收藏 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%') 
  } 
}
分享
微博
QQ
微信
回复
3h前
相关问题
使用Drawing实现图形绘制与显示
770浏览 • 1回复 待解决
使用Drawing进行2d图像绘制
819浏览 • 1回复 待解决
Path组件绘制的线条粗细不一致
1826浏览 • 1回复 待解决
导入ohos相关模块都找不到
6158浏览 • 1回复 待解决
HarmonyOS Canvas关于绘制图片问题
225浏览 • 1回复 待解决