如何绘制带圆角的矩形

如何绘制带圆角的矩形。

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绘制圆角矩形
540浏览 • 1回复 待解决
修改分段按钮样式为圆角矩形
974浏览 • 1回复 待解决
HarmonyOS canvas支持画圆角矩形
366浏览 • 1回复 待解决
利用native接口实现一个圆角矩形
1663浏览 • 1回复 待解决
如何录制网络请求trace
298浏览 • 2回复 待解决
如何实现渐变圆角边框
2527浏览 • 1回复 待解决
如何实现刻度进度条?
664浏览 • 1回复 待解决
如何实现图片进度条
802浏览 • 1回复 待解决
lottile动画如何圆角
928浏览 • 0回复 待解决
HarmonyOS bindPopup如何去掉圆角
0浏览 • 0回复 待解决
如何设置分组列表圆角和间距
1929浏览 • 1回复 待解决
如何操作canvas重新绘制
1089浏览 • 1回复 待解决
鸿蒙如何实现位图绘制
9966浏览 • 1回复 待解决