Introduction Components Blocks Builder Community
Components keyboard_arrow_up Add

Canvas

  • Description

      Canvas

      The component Canvas is a rectangular panel touch two-dimensional in that it can be drawn and the objects that it contains can be move.

      The properties 'Background Color', 'Paint Color', 'Background Image', 'Width' and 'Height' of the canvas can be set either in the designer or in the blocks Editor. The 'Width' and 'Height' are measured in pixels and must be positive.

        Any location on the Canvas you can specify as a pair of values ( X, Y), where:

      • X is the amount of pixels from the left edge of the Canvas.
      • Y is the amount of pixels the top edge of the canvas.

      There are events to tell when and where it has touched the Canvas, or has been swept into a component Sprite ( Image, Sprite or Ball). It also has methods to draw points, lines, and circles.

  • Events

    • Dragged
    • Event that runs when the user does a drag from one point ( X - Prior Y - Prior) to another (x, y). The pair ( X - Initial, Y - Initial indicates where the user touched the screen for the first time, and "dragged Any Sprite" indicates if dragging a sprite.
    • Flung
    • Event that runs when you perform a gesture of fling(slipping fast) on the canvas. The slide is it provides the position (x, y) of the start of the sliding, relative to the upper left of the canvas. the
      it Also provides the speed (pixels per millisecond) and the direction (0-360 degrees) of the slide, as well as the components of velocity 'X' and velocity 'Y' the vector of slip. The value of "Sprite " Released" is 'True' if a sprite is located near the start point of the gesture of fling (slip).
    • Touch Down
    • Event that runs when the user begins touching the canvas (places finger on canvas and leave it there). This event provides us with the position (x, y) of the touch, relative to the corner top left of the canvas.
    • Touch Up
    • Event that runs when the user stops touching the canvas (lifts finger after an event 'Press'). This event provides us with the position (x, y) of the touch, relative to the top corner left of the canvas.
    • Touched
    • Event that runs when the user touches the canvas and then immediately lifts the finger. This event it provides the position (x, y) of the touch, relative to the top left corner of the canvas. 'Touched Any Sprite' it is 'True' if the same touch also touched a sprite, otherwise it is 'False'.

  • Procedures

    • Clear
    • This method clears everything drawn on the canvas, but not the color background or background image of the Canvas.
    • Draw Circle
    • This method allows to draw a circle (filled) in the coordinates given in the canvas, with the given radius.
    • Draw Line
    • This method allows to draw a line between the coordinates given in the canvas.
    • Draw Point
    • This method allows to draw a point at the coordinates given in the canvas.
    • Draw Text
    • This method allows to draw the specified text relative to the specified coordinates. Using the values of the properties 'font Size' and 'The position of the text'.
    • Draw Text At Angle
    • This method allows to draw the specified text starting at the specified coordinates and the specified angle. Using the values of the properties 'font Size' and 'The position of the text'.
    • Get Background Pixel Color
    • This method gets the color of the specified point. This includes the background and the points, lines or circles drawn, but not the sprites.
    • Get Pixel Color
    • This method gets the color of the specified point.
    • Save
    • This method saves the image contained in the canvas in the storage external of the device. If an error occurs, it will call the event 'Error Occurred' in the component Display.
    • Save As
    • This method saves the image contained in the canvas in the storage external device in the file named 'File Name'. The file name must end with the extensions .jpg, .jpeg or .png, determine the type of file.
    • Set Background Pixel Color
    • This method sets the color of the specified point. This procedure differs from the procedure 'Draw point' by having an argument for the color.

  • Properties

    • Background Color
    • This property defines the background color of the canvas.
    • Background image
    • This property defines the background image of the canvas.
    • Font size
    • This property defines the size of the text drawn on the canvas.
    • Height
    • This property defines the height of the canvas.
    • Height Percent
    • This property defines the height in percentage of the canvas.
    • Width
    • This property defines the width of the canvas.
    • Width Percent
    • This property defines the width in percentage of the canvas.
    • Line Width
    • This property defines the width of the lines drawn on the canvas.
    • Paint Color
    • This property defines the color in which lines are drawn in the canvas.
    • Text Position
    • This property determines the alignment of the text drawn by 'Draw-text' () or 'Draw text at an angle' () with respect to the point specified by this command: point to the left of the text, the point at the center of the text or point to the right of the text.
    • Visible
    • If you set this property to 'True' the canvas will be visible, what otherwise it will be hidden.

  • Example

    • Color picker

    • For this example we will use the component Ball and the Canvas.

    • The position of the ball will give us the desired color, and may store it in a variable.
    • Paint and press

    • For this example we will use the color selector above, and the procedures 'Press' and 'Drag'.

    • We define that shall do according to that situation.
      • If the user clicks on the canvas, write the word Block2Code in different colors.
      • If the user drags the paint while doing so.

    • These options are managed by the buttons above. In addition we have a button that allows you to clean the Canvas and another that shows us the color picker, you can choose the color of the paint on the canvas.

    • And we already have our simulator in "Paint" and printing worked.