Nothing gets drawn when using Path

[offizium-berndstorath]

Which platform(s) does your issue occur on?

• affected os: iOS (maybe android?)
• version: iOS 17.4
• emulator or device: Simulator

Please, provide the following version numbers that your issue occurs with:

• CLI: 8.7.0
• Cross-platform modules: 8.6.2
• Runtime(s): ios: 8.6.4
• Plugin(s): ui-canvas 4.7.16, ui-chart 2.0.1

Please, tell us how to recreate the issue in as much detail as possible.

I am trying to create a rectangle for ui-chart. Where top left and top right corners are rounded. I found a solution on stackoverflow https://stackoverflow.com/questions/5896234/how-to-use-android-canvas-to-draw-a-rectangle-with-only-topleft-and-topright-cor The problem i am facing it just doesnt draw anything. When drawing a normal rectangle or when drawing a rounded rectangle everything looks fine. But with the path solution as suggestion on so nothing gets drawn

Is there any code involved?

chart.customRenderer = {
  drawBar(c, e, dataSet, left, top, right, bottom, paint) {
    let delta = 0;
    if (!e.last) {
      delta+=9;
    }
    const path = new Path();
    const corners = [
      5, 5,        // Top left radius in px
      5, 5,        // Top right radius in px
      0, 0,          // Bottom right radius in px
      0, 0           // Bottom left radius in px
    ]
    const rec = createRect(left+delta, 100-(bottom-top), 9, bottom-top);
    path.addRoundRect(rec, corners, Direction.CW)
    c.drawPath(path, paint);
  }
}

[offizium-berndstorath]

When using the second solution i get the error

Method not implemented: rLineTo

[offizium-berndstorath]

Using this as a workaround

chart.customRenderer = {
  drawBar(c, e, dataSet, left, top, right, bottom, paint) {
    let delta = 0;
    if (!e.last) {
      delta+=7;
    }
    const rect = createRect(left+delta, 100-(bottom-top), 9, bottom-top);
    c.drawRoundRect(rect, 4, 4, paint);
    c.drawRect(rect.left, rect.top + 4, rect.right, rect.bottom, paint)
  }
}

It draws a a rounded rect and then a normal on top. But this doesnt work with alpha colors

[farfromrefug]

@offizium-berndstorath indeed there is a issue with the addRoundRect you used. you can use that signature instead:

public void addRoundRect (float left, 
                float top, 
                float right, 
                float bottom, 
                float rx, 
                float ry, 
               Path.Direction dir)
                ```

[offizium-berndstorath]

Using

const rect = createRect(left+delta, 100-(bottom-top), 9, bottom-top);
path.addRoundRect(rect.left, rect.top, rect.right, rect.bottom, 5, 5, Direction.CW)
c.drawPath(path, paint);

crashes to app without showing a error message. And i suspect because the parameters are only rx,ry like canvas.drawRoundRect this would round all corners

[farfromrefug]

@offizium-berndstorath indeed it is not the signature you want (sorry). Now i misread your issue and thought it was on Android :s On iOS for now i dont have a way to create a rounded rectangle with different radii. And i am not on macos right now. Will look at it later