Interface: Image
View is a base class for all other visual components. All View-derived components have the following properties, methods, and events in addition to their own.
Hierarchy
-
↳
Image
Properties
BackdropBlur
• Optional
BackdropBlur: BackdropBlurEffect
Inherited from
BlendMode
• Optional
BlendMode: BlendModeEffect
Inherited from
Blur
• Optional
Blur: BlurEffect
Inherited from
Brightness
• Optional
Brightness: BrightnessEffect
Inherited from
Contrast
• Optional
Contrast: ContrastEffect
Inherited from
Draggable
• Optional
Draggable: DraggableEffect
Inherited from
Follow
• Optional
Follow: FollowEffect
Inherited from
Glow
• Optional
Glow: GlowEffect
Inherited from
Grayscale
• Optional
Grayscale: GrayscaleEffect
Inherited from
HueRotate
• Optional
HueRotate: HueRotateEffect
Inherited from
Invert
• Optional
Invert: InvertEffect
Inherited from
LetterSpacing
• Optional
LetterSpacing: LetterSpacingEffect
Inherited from
LookAt
• Optional
LookAt: LookAtEffect
Inherited from
Oscillate
• Optional
Oscillate: OscillateEffect
Inherited from
Physics
• Optional
Physics: PhysicsEffect
Inherited from
Saturation
• Optional
Saturation: SaturationEffect
Inherited from
Sepia
• Optional
Sepia: SepiaEffect
Inherited from
Shadow
• Optional
Shadow: ShadowEffect
Inherited from
Spin
• Optional
Spin: SpinEffect
Inherited from
TextOutline
• Optional
TextOutline: TextOutlineEffect
Inherited from
Transform
• Optional
Transform: TransformEffect
Inherited from
attribution
• attribution: Attribution
backgroundColor
• backgroundColor: undefined
| string
The background color of the component.
Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)).
An undefined
background color is transparent.
Example
// Set the background color of the view to a translucent red.
view.backgroundColor = 'rgba(255, 0, 0, 50%)'
Inherited from
color
• color: undefined
| string
The foreground or text color of the component.
Can be any valid CSS color value (https://developer.mozilla.org/en-US/docs/Web/CSS/color_value (opens in a new tab)).
An undefined
foreground color is inherited from one of the component's ancestors.
Example
// Set the foreground color of the view to red.
view.color = 'red';
Inherited from
componentType
• Readonly
componentType: string
The component's type. E.g. "View", "Text", "Button", "Page", etc.
Inherited from
fit
• fit: "none"
| "fill"
| "contain"
| "cover"
| "scale-down"
How the image should be resized to fit its container. See: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit (opens in a new tab).
cover -- The image scales up or down to fully cover its box, preserving its aspect ratio. May crop the image. contain -- The image scales up or down to be fully contained in its box, preserving its aspect ratio. May leave empty space above/below or two the sides. fill -- The image fills its box, even if it has to stretch to do so. none -- The image is not resized at all, and is displayed at its original size. scale-down -- The image is scaled down to fully fit within its box, preserving its aspect ratio. It is not scaled up to fit.
Default
'cover'
height
• height: number
The height of the component.
Inherited from
id
• Readonly
id: number
Every Component is assigned a unique numerical id that cannot be changed.
Components can be looked up by id using the get
function.
Inherited from
link
• link: undefined
| string
The address of the link. Can be a URL to a web page, a 'tel:' phone number, a 'mailto:' email address, or a 'sms:' phone number. Also can be a relative link to a page, "@previous" for the previous page, or "@next" for the next page. If undefined the component is not treated as a link.
Default
undefined
Inherited from
linkRel
• linkRel: LinkRelType
See
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel (opens in a new tab)
Inherited from
linkTarget
• linkTarget: "_blank"
| "_self"
| "_parent"
| "_top"
The target of the link. Can be '_blank' (open in new window or tab), '_self' (replace current page), '_parent' (replace parent if in an iframe), or '_top' (replace top if in an iframe).
Default
'_self'
See
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target (opens in a new tab)
Inherited from
linkTitle
• linkTitle: string
The title of the link displayed on hover. If '' nothing is displayed.
Default
''
Inherited from
loaded
• Readonly
loaded: boolean
name
• name: undefined
| string
Every Component can have a user-assigned name. It can be anything and is not guaranteed to be unique.
Components can be looked up by name using the get
function.
Inherited from
naturalHeight
• Readonly
naturalHeight: number
naturalWidth
• Readonly
naturalWidth: number
opacity
• opacity: number
The component's opacity, or level of transparency.
1 is fully opaque (not transparent at all), 0.5 is 50% see-through, and 0 is completely transparent.
Inherited from
optimize
• optimize: boolean
Optimize image size and format.
When enabled, our server sends optimized images. This might cause a small degradation in quality.
Default
false
page
• Readonly
page: undefined
| Page
The Page that this component is a child of, if any.
Inherited from
parent
• Readonly
parent: undefined
| View
When added to a Container (or a Page, which is a Container), the Container is assigned to the parent property.
Inherited from
rendering
• Optional
rendering: "normal"
| "pixelated"
The image rendering mode. normal
(smooth scaling) or pixelated
(blocky scaling).
Default
'normal'
rotation
• rotation: number
The component's rotation, in degrees.
Inherited from
scale
• scale: number
The component's scale multiplier.
Inherited from
source
• source: undefined
| string
style
• style: Partial
(opens in a new tab)<CSSStyleDeclaration
(opens in a new tab)>
Low-level access to the component's CSS property.
Inherited from
tabIndex
• tabIndex: undefined
| number
Control if or how the component is focused when the tab key is pressed.
0 - The component should be focusable in sequential keyboard navigation, after any positive tabIndex values. a positive value - Should be focusable in sequential keyboard navigation, with the order defined by the value. -1 - Should not be focusable in sequential keyboard navigation, but could be focused programmatically. undefined - the browser decides whether the component is focusable.
Default
undefined
See
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex (opens in a new tab)
Inherited from
visible
• visible: boolean
The component's visibility.
true
is visible, false
is invisible
Inherited from
width
• width: number
The width of the component.
Inherited from
x
• x: number
The component's x coordinate.
Inherited from
y
• y: number
The component's y coordinate.
Inherited from
Methods
addEffect
▸ addEffect(effect
): void
Add an effect to the component.
Parameters
Name | Type |
---|---|
effect | string |
Returns
void
Inherited from
clone
▸ clone(): Image
Create an exact duplicate of a component.
The clone must be added to a container with appendChild
to be visible.
Returns
Example
const clone = view.clone();
clone.x = 100;
clone.y = 100;
view.page.appendChild(clone);
Overrides
dispatchEvent
▸ dispatchEvent(event
): Promise
(opens in a new tab)<void
>
Triggers the event listeners for the specified event.
Parameters
Name | Type |
---|---|
event | Event (opens in a new tab) |
Returns
Promise
(opens in a new tab)<void
>
Inherited from
focus
▸ focus(options?
): void
Parameters
Name | Type |
---|---|
options? | FocusOptions |
Returns
void
Inherited from
hasPointerCapture
▸ hasPointerCapture(pointerId
): boolean
Parameters
Name | Type |
---|---|
pointerId | number |
Returns
boolean
Inherited from
localPointFromClient
▸ localPointFromClient(x
, y
): Object
Convert a client viewport position to a position suitable for a View. Useful for converting mouse or touch positions.
Parameters
Name | Type | Description |
---|---|---|
x | number | The x position in the client viewport. |
y | number | The y position in the client viewport. |
Returns
Object
an object with x and y properties.
Name | Type |
---|---|
x | number |
y | number |
Example
let dragging = false;
let pointerOffset;
this.on("pointerdown", (event) => {
this.setPointerCapture(event.pointerId);
// note: objects are positioned within their parent's coordinate system
const point = this.parent.localPointFromClient(event.clientX, event.clientY)
pointerOffset = { x: point.x - this.x, y: point.y - this.y };
dragging = true;
});
this.on("pointermove", (ev) => {
if (!dragging)
return;
// note: objects are positioned within their parent's coordinate system
const point = this.parent.localPointFromClient(ev.clientX, ev.clientY);
this.x = point.x - pointerOffset.x;
this.y = point.y - pointerOffset.y;
});
this.on("pointerup", (event) => {
this.releasePointerCapture(event.pointerId);
dragging = false;
});
Inherited from
on
▸ on<K
>(type
, listener
, options?
): () => void
Add an event listener to the component.
Type parameters
Name | Type |
---|---|
K | extends keyof EventHandlersEventMap |
Parameters
Name | Type |
---|---|
type | K |
listener | (event : EventHandlersEventMap [K ]) => any |
options? | EventListenerOptions |
Returns
fn
Returns a function that removes the event listener.
▸ (): void
Add an event listener to the component.
Returns
void
Returns a function that removes the event listener.
Inherited from
releasePointerCapture
▸ releasePointerCapture(pointerId
): void
Parameters
Name | Type |
---|---|
pointerId | number |
Returns
void
Inherited from
remove
▸ remove(): void
Remove the component from its parent.
Returns
void
Example
view.remove();
Inherited from
removeEffect
▸ removeEffect(effect
): void
Remove an effect to the component.
Parameters
Name | Type |
---|---|
effect | string |
Returns
void
Inherited from
setPointerCapture
▸ setPointerCapture(pointerId
): void
Parameters
Name | Type |
---|---|
pointerId | number |
Returns
void