Basic HTML Version

|  | Table of Contents |  | View Full Version

Page 95 - 2615_KEC
P. 95

    DIFFERENCES BETWEEN MOUSE EVENTS AND TOUCH EVENTS

                     The key differences between mouse events and touch events are as follows:

                                   Mouse Events                                       Touch Events

                      Triggered  by  a mouse  or similar  Triggered  by  touchscreens  or touch-sensitive
                      pointing device.                             devices.

                      Includes events like click, double-click,  Includes touch-specific events like touch down,

                      right-click, hover, drag and scroll.         touch up, tap, swipe and drag.

                      Typically, single-point interaction.         Multi-touch support allows simultaneous input
                                                                   from multiple fingers.

                               INTRODUCING CANVAS COMPONENT

                     The Canvas component is one of the most powerful and versatile elements in MIT App
                     Inventor, especially for creating interactive apps, games and graphics-based applications.

                     The Canvas allows developers to draw shapes, display images and create interactive
                     content such as animations, games and dynamic user interfaces.

                     The Canvas is a graphical drawing surface within your app where you can draw lines,
                     shapes, display images and create animations. It provides a 2D drawing space and you
                     can detect touch events like tapping, dragging and touching on it, making it ideal for apps

                     that require user interaction with visuals.

                     DIFFERENT BLOCKS OF CANVAS COMPONENT

                     In MIT App Inventor, the Canvas component is a powerful tool for creating interactive
                     graphics and animations in your app. It allows you to draw shapes, text and images and
                     respond to touch events. The Canvas component is divided into several blocks in the Blocks
                     Editor, each serving a specific purpose. Some important blocks available for the Canvas
                     component:

                       Properties blocks: These blocks allow you to get or set properties of the Canvas.

                       o  Canvas.BackgroundColor: Gets or sets the background color of the Canvas.

                       o  Canvas.PaintColor: Gets or sets the color used for drawing shapes, text or lines.

                       o  Canvas.LineWidth: Gets or sets the width of lines drawn on the Canvas.
                       o  Canvas.Width: Gets or sets the width of the Canvas.

                       o  Canvas.Height: Gets or sets the height of the Canvas.

                       o  Canvas.Visible: Gets or sets whether the Canvas is visible or not.

                                                                                             UI Design and Touch Events  93

| 90 91 92 93 94 95 96 97 98 99 100 |