Tabris.js Widgets: ImageView
The widget is used for displaying an image. It will display an object of ImageValue data type that describes the image file URL and dimensions, or scale factor. Here is an example of ImageValue: {src: “http://example.com/catseye.jpg”, width: 100, height: 200}.
You can set a zoom level for the image and enable pinch-to-zoom mode. By setting a scale mode, you can fill a whole page with the image or stretch it.
Here is the minimal code required to create an ImageView in JS syntax:
|
1 2 3 |
import {ImageView, contentView} from 'tabris'; new ImageView({image: 'resources/image.png'}).appendTo(contentView); |
And with JSX the same code will look like:
|
1 2 3 4 5 |
import {ImageView, contentView} from 'tabris'; contentView.append( ImageView image='resources/image.png'/> ); |
Just like tag in HTML, ImageView widget can be used as a button. Run the snippet below using QR code and click at the target image:
|
1 2 3 4 5 6 7 8 9 10 11 |
import {ImageView, TextView, contentView} from 'tabris'; let counter = 0; contentView.append( <$> ImageView center highlightOnTouch image='resources/target_200.png' onTap={() => $(TextView).only().text = `touched ${++counter} times`}/> TextView centerX top='prev() 12'/> </$> ); |
And here is a bit more complicated-looking example, demonstrating different scale modes for large and small images:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import {ImageView, Picker, TextView, contentView} from 'tabris'; /** @type {Array<tabris.ImageView['scaleMode']>} */ const SCALE_MODES = ['auto', 'fit', 'fill', 'stretch', 'none']; const IMAGES = [ {name: 'Large', src: 'resources/salad.jpg', scale: 3}, {name: 'Small', src: 'resources/landscape.jpg', scale: 3} ]; contentView.append( <$> ImageView centerX top={16} width={200} height={200} background='rgb(220, 220, 220)' image={IMAGES[0]}/> TextView left={16} top='prev() 32' width={96} text='Image'/> Picker left='prev()' right={16} baseline='prev()' itemCount={IMAGES.length} selectionIndex={0} itemText={index => IMAGES[index].name} onSelect={ev => $(ImageView).only().image = IMAGES[ev.index]}/> TextView left={16} top='prev() 32' width={96}>Scale mode</TextView> Picker right={16} left='prev()' baseline='prev()' itemCount={SCALE_MODES.length} selectionIndex={0} itemText={index => SCALE_MODES[index]} onSelect={ev => $(ImageView).only().scaleMode = SCALE_MODES[ev.index]}/> </$> ); |
To ennable zoom for the image you should use the zoomEnabled attribute. Here is the simple use case:
|
1 2 3 4 5 6 7 |
import {contentView, ImageView, Stack} from 'tabris'; contentView.append( Stack stretch alignment='stretchX'> ImageView stretchY zoomEnabled image='resources/salad.jpg' background='#f5f5f5'/> </Stack> ); |
Run the QR code below to see the advanced demonstration with the use of minZoomLevel and maxZoomLevel attributes. Check Tabris.js snippets repository, for more advanced examples.
To explore all the widget class properties and events, use the ImageView documentation page.
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
