Enhanced drawing tools

[Scott Ferguson]

Here are some experimental but useful enhancements to a few of the Canvas drawing tools.

FontSize:

accepts any canvas component block

sets FontSize based on a percentage of Canvas Height

Opacity:

By default, App Inventor colors selected from the palette are opaque and have an opacity value of 255.

This block provides an easy way to set opacity as a percentage from 0 (transparent) to 100 percent (opaque).

The color returned in the example below will have 50% opacity and will be semi-transparent.

DrawLine:

This alternate to the Canvas DrawLine block accepts percentage values related to Canvas Width and Height as well as LineWidth and Color values.

The LineWidth and Color values are changed back to their original values before the block was executed to prevent interference with other blocks that may depend on the default values.

In the example block below a horizontal line will be drawn across the Canvas 25% down from the Canvas top with LineWidth 2 and rouge color.

DrawCircle:

This alternate to the Canvas DrawCircle block accepts a Canvas component block and accepts percentages for the x,y and radius values.

The added Color argument is shown using the Opacity block to set the color to 50% opacity.

This alternate to the Canvas DrawText block accepts any Canvas block and adds an argument to set the text color.

Like the default Canvas DrawText block text is centered over PercentCenterX and is drawn above the PercentBaseY value. 

(Alignment can also be set to Left or Right.)

PercentHeight sets the FontSize to be a percentage of the Canvas Height.

In this example, red-colored text 'NorthWest is set to 5% of the Canvas Height, centered on PercentCenterX and above PercentBaseY at 25% from the left of the Canvas and 25% down from the top of the Canvas.

This is more intuitive and functional than having to figure out what size font to use for different devices and what values to use to place it in the correct location on the Canvas.

See the example project.

With the Companion app running, tilt the device between landscape and portrait orientations and try the project on different devices.

Responsive sizing on the Canvas is the future for App Inventor Canvas users AND a far better solution than the standard Android Developers way to use different layouts for different devices!!!!

---

sf

[Peter Mathijssen]

Nice work. Reminds me a bit of my MSX-Basic days. 

[Scott Ferguson]

That is interesting!

I am not familiar with the MSX computers but see they appear similar to my first computer, the Commodore VIC-20.

22 character display on your home TV, cassette tape drive and a few game cartridges available.

I learned to program in BASIC on that.

It was loads of fun :)

---

sf

[Abraham Getzler]

Very reusable.

Fully parametrized, no global side effects.

A keeper!

ABG

--
(you have received this message from the App Inventor Developers Library)
---
You received this message because you are subscribed to the Google Groups "App Inventor Developers Library" group.
To unsubscribe from this group and stop receiving emails from it, send an email to app-inventor-develope...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

ABG

(Personal emails from boards are auto-spam deleted)