Transparent color in ios-ipados

alexpaya · August 19, 2023, 2:53am

blocks

Is there anyway to set a "transparent" stroke color or is there any other way to clear the content of the layer on the Canvas above the background image called CGContextRef under the user's finger, when he moves it, like drawing Canvas1.dragged with Canvas1.paintColor.None?

I tried to create undo and rubber with the transparent color In the block above, that works perfectly with Canvas in Android, but in the ios canvas doesn’t work.
I tried write in hex instead of decimal #00FFFFFFF or #00000000 and make color black/white
with density 0%
Is there any way to do it in ios?

Thanks

Anke · August 19, 2023, 8:58am

Post a simple test aia.

alexpaya · August 20, 2023, 3:33am

Thank for your time
Trasparent.aia (8.3 KB)
as you see the the Canvas.Clear works perfectly.

Anke · August 20, 2023, 12:12pm

Yes, and it shouldn't work on Android either. By the way, it ONLY works with rgb(255,255,255.0). Why with this one - and only with this one - could probably only be answered by @ewpatton.

alexpaya · August 21, 2023, 8:28am

The rubber with this color doesn’t work in I-os/Ipad-os, probably we have to wait is implemented in canvas as it is in android
component_method

I tried to use this, replacing pixel by pixel the backgroundcolor, but the TapThreshold blend the different colours, if the background colour is consistent it works, but is not spot -on as in android.
Waiting for a clue from @ewpatton.

Anke · August 21, 2023, 9:51am

Yes, and as I already said, it shouldn't work on Android too.

I don't thinks so. Why exactly this color setting (white, completely transparent) works like an eraser with Android is a mystery - at least for me.

ewpatton · August 21, 2023, 7:38pm

On the Android side, assigning the paint color to the canvas takes one of three branches:

github.com

mit-cml/appinventor-sources/blob/ddc206bd35c3ccb365fca2edf2c4538a492a4c5d/appinventor/components/src/com/google/appinventor/components/runtime/Canvas.java#L1158

    
      
           * alpha, red, green, and blue components
           */
          @DesignerProperty(editorType = PropertyTypeConstants.PROPERTY_TYPE_COLOR,
              defaultValue = Component.DEFAULT_VALUE_COLOR_BLACK)
          @SimpleProperty
          public void PaintColor(int argb) {
            paintColor = argb;
            changePaint(paint, argb);
          }
          
          
private void changePaint(Paint paint, int argb) {
            if (argb == Component.COLOR_DEFAULT) {
              // The default paint color is black.
              PaintUtil.changePaint(paint, Component.COLOR_BLACK);
            } else if (argb == Component.COLOR_NONE) {
              PaintUtil.changePaintTransparent(paint);
            } else {
              PaintUtil.changePaint(paint, argb);
            }
          }

The second branch gets to the heart of the behavior on Android. If you provide the "None" color (int = 16777215) then it sets the paint to "transparent", which switches the Porter Duff mode to CLEAR. Since the bitmap used for drawing is separate from the background bitmap, drawing a line effectively acts like an eraser for that layer.

The issue on the iOS side arises from the fact that when we originally implemented the Canvas component we did so using CoreAnimation and CAShapeLayers. This means that when you draw on the Canvas on iOS it's actually storing the drawing operations as vectors and then rendering them on top of the background image rather than rasterizing it at the pixel level. An unfortunate side effect of this is that now when you set the None color it just draws new invisible lines on top of the existing lines. We will need to switch to a raster based system on iOS to fix this.

alexpaya · August 22, 2023, 7:40am

I suppose will require a massive effort to re-code Canvas.
Can be implemented something like a selected area 50x50px instead of all the canvas
where we can call
component_method 2
to use as a rubber and undo?
I know you @ewpatton are very busy but would be owesome.
Thank you