如何绘制带圆角的矩形

如何绘制带圆角的矩形。

HarmonyOS
2024-09-23 13:46:27
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
zbw_apple

1、使用arcTo绘制弧线https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-canvasrenderingcontext2d-V5

demo:

Canvas(this.context)  
  .width('100%')  
  .height('100%')  
  .backgroundColor('#ffff00')  
  .onReady(() =>{  
    let x = 50;  
    let y = 50;  
    let w = 200;  
    let h = 100;  
    let r = 10;  
    this.context.fillStyle = '#0000ff';  
    this.context.beginPath();  
    this.context.moveTo(x + r, y);  
    this.context.arcTo(x + w, y, x + w, y + h, r);  
    this.context.arcTo(x + w, y + h, x, y + h, r);  
    this.context.arcTo(x, y + h, x, y, r);  
    this.context.arcTo(x, y, x + w, y, r);  
    this.context.closePath();  
    this.context.fill();  
  })

2、使用rect图形组件https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/_rect-V5

demo:

Shape() {  
  Rect({ width: 200, height: 100, radius: 10 }).fill('#0000ff')  
}
分享
微博
QQ
微信
回复
2024-09-23 17:48:40
相关问题
如何使用canvas绘制圆角矩形
500浏览 • 1回复 待解决
修改分段按钮样式为圆角矩形
926浏览 • 1回复 待解决
HarmonyOS canvas支持画圆角矩形
280浏览 • 1回复 待解决
利用native接口实现一个圆角矩形
1611浏览 • 1回复 待解决
如何实现渐变圆角边框
2469浏览 • 1回复 待解决
lottile动画如何圆角
904浏览 • 0回复 待解决
如何录制网络请求trace
240浏览 • 2回复 待解决
如何实现刻度进度条?
608浏览 • 1回复 待解决
如何实现图片进度条
768浏览 • 1回复 待解决
如何设置分组列表圆角和间距
1869浏览 • 1回复 待解决
HarmonyOS .clip矩形裁切无法生效
264浏览 • 1回复 待解决
HarmonyOS span中如何设置圆角
397浏览 • 1回复 待解决
HarmonyOS bindSheet如何修改圆角大小?
249浏览 • 1回复 待解决