Image

Description

The Image component displays a 2D image from an image file.

Example

import React from "react";
import { View, Image, Button } from "magic-script-components";
export default class MyApp extends React.Component {
state = { index: 1 };
onNextClick = eventData => {
this.setState(state => ({ index: state.index < 4 ? state.index + 1 : 1 }));
};
render() {
const path = `res/DemoPicture${this.state.index}.jpg`;
return (
<View>
<Image
filePath={path}
height={0.25}
width={0.5}
localPosition={[0.1, 0.1, 0]}
/>
<Button
localPosition={[0.12, -0.15, 0]}
width={0.25}
height={0.1}
roundness={0.5}
type="icon"
iconType="arrow-right"
onClick={this.onNextClick}
/>
</View>
);
}
}

Common Events

Common Properties

Create Properties

Image offers 3 constructors accepting different property sets.

NameTypeDefault ValueDescription
filePathstringn/aThe path to the file to render for the image.
widthnumbern/aThe width of the image.
heightnumbern/aThe height of the image.
absolutePathbooleanfalseFlag that pngFile is an absolute path name, instead of a relative path.
useFramebooleanfalseSpecifies whether the image should have a frame.

NameTypeDefault ValueDescription
resourceIdBigIntn/aThe resource ID to render for the image.
widthnumbern/aThe width of the image.
heightnumbern/aThe height of the image.
useFramebooleanfalseSpecifies whether the image should have a frame.

NameTypeDefault ValueDescription
iconstringn/aThe SystemIcon type for the image.
heightnumbern/aThe height of the image.

icon options: IconType

Element Properties

NameTypeDescription
colorvec4Sets a color to modulate the image.
textCoords[vec2]Sets the texture coordinates used by the image. The texture coordinates must be a list of four coordinates representing the UV coordinates of the four corners.
opaquebooleanSets the opacity state of the image.
uibooleanSets whether the image is rendered on UI Layer.
imageFrameResourceBigIntSets the model resource used for the image frame. Note: Frame models are expected to be one meter high, one meter wide, and centered at the origin.
renderResourceBigIntSets the render resource used for the image.