Canvas

Extends Composite

Canvas is a widget that can be used to draw graphics using a canvas context.

Import this type with “const {Canvas} = require('tabris');”

Canvas on Android

Example:

  1. new Canvas({
  2.   left: 0, top: 0, right: 0, bottom: 0
  3. }).on("resize", ({target: canvas, width, height}) => {
  4.   let ctx = canvas.getContext("2d", width, height);
  5.   ctx.moveTo(0, 0);
  6.   // ...
  7. }).appendTo(page);

Methods

getContext(contextType, width, height)

Parameters:

  • contextType: string
    • the context identifier. Only "2d" is currently supported.
  • width: number
    • the width of the canvas context to create
  • height: number

Returns the drawing context with the given size.

Example

  1. const {Canvas, ui, device} = require('tabris');
  3. // Draw shapes on a canvas using HTML5 Canvas API
  5. new Canvas({
  6.   left: 10, top: 10, right: 10, bottom: 10
  7. }).on('resize', ({target: canvas, width, height}) => {
  8.   let scaleFactor = device.scaleFactor;
  9.   let ctx = canvas.getContext('2d', width * scaleFactor, height * scaleFactor);
  10.   ctx.scale(scaleFactor, scaleFactor);
  11.   ctx.strokeStyle = 'rgb(78, 154, 217)';
  12.   ctx.lineWidth = 10;
  13.   ctx.moveTo(20, 20);
  14.   ctx.lineTo(width - 40, height - 40);
  15.   ctx.stroke();
  17.   // draw image
  18.   ctx.putImageData(createImageData(80, 40), 100, 100);
  20.   // copy region
  21.   let data = ctx.getImageData(0, 0, 100, 100);
  22.   ctx.putImageData(data, 180, 100);
  24. }).appendTo(ui.contentView);
  26. function createImageData(width, height) {
  27.   let array = [];
  28.   for (let y = 0; y < height; y++) {
  29.     for (let x = 0; x < width; x++) {
  30.       let alpha = x % 20 > y % 20 ? 255 : 0;
  31.       array.push(200, 0, 0, alpha);
  32.     }
  33.   }
  34.   return new ImageData(new Uint8ClampedArray(array), width, height);
  35. }

See also

原文:

https://youjingyu.github.io/Tabris-Documention/?folderName=widgets&pageName=Canvas.html