HarmonyOS 鸿蒙Next canvas.drawCircle方法画出的圆形位置偏移

发布于 1周前 作者 yuanlaile 最后一次编辑是 5天前 来自 鸿蒙OS

HarmonyOS 鸿蒙Next canvas.drawCircle方法画出的圆形位置偏移

Polyline({ width: 260, height: 260 })
  .points([[187.2, 177.6], [76.5, 177.6], [198, 152.1], [66.6, 160.5]])
  .fillOpacity(0)
  .stroke(Color.White)
  .strokeWidth(3)
Canvas(this.context).width(260).height(260).onReady(() => {
  this.context.canvas.drawCircle(187.2, 177.6, 20)
  this.context.canvas.drawCircle(76.5, 177.6, 20)
  this.context.canvas.drawCircle(198, 152.1, 20)
  this.context.canvas.drawCircle(66.6, 160.5, 20)
  this.context.invalidate()
})

接下图，红色字是Polyline是正确的，如何根据xy坐标在Polyline四个位置画四个圆形？


更多关于HarmonyOS 鸿蒙Next canvas.drawCircle方法画出的圆形位置偏移的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

需要统一以下单位，demo如下：

[@Entry](/user/Entry)
[@Component](/user/Component)
struct Index {
 private context: DrawingRenderingContext = new DrawingRenderingContext()
 build() {
   Stack() {
     Polyline({ width: '260px', height: '260px'})
       .points([['187.2px', '177.6px'], ['76.5px', '177.6px'], ['198px', '152.1px'], ['66.6px', '160.5px']])
       .fillOpacity(0)
       .stroke(Color.Black)
       .strokeWidth(3)
     Canvas(this.context)
       .width('260px')
       .height('260px')
       .onReady(() => {
         this.context.canvas.drawCircle(187.2, 177.6, 20)
         this.context.canvas.drawCircle(76.5, 177.6, 20)
         this.context.canvas.drawCircle(198, 152.1, 20)
         this.context.canvas.drawCircle(66.6, 160.5, 20)
         this.context.invalidate()
       })
   }
 }
}

参考以下链接：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-drawing-components-polyline-V5#poin

更多关于HarmonyOS 鸿蒙Next canvas.drawCircle方法画出的圆形位置偏移的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙系统中，canvas.drawCircle方法用于在画布上绘制圆形。若圆形位置出现偏移，这通常与坐标系统、绘制参数或画布变换有关。

  1. 检查圆心坐标：确保传递给drawCircle方法的圆心坐标（float cx, float cy）正确无误。这些坐标表示圆形中心的x和y位置，任何偏差都会直接影响圆形的绘制位置。

  2. 检查半径长度：float radius参数定义了圆形的半径长度。半径值不会影响位置偏移，但会影响圆形的大小和显示效果。

  3. 考虑画布变换：如果在绘制圆形前对画布进行了平移、旋转或缩放等变换（如使用canvas.translate, canvas.rotate, canvas.scale等方法），这会影响后续绘制操作的位置和形状。确保这些变换在逻辑上是预期的，或者调整它们以修正偏移。

  4. 检查画布边界：确保绘制圆形的区域在画布的有效范围内。如果圆心坐标和半径导致圆形部分或全部超出画布边界，则可能无法正确显示或显示不完整。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部