fcanvasImageRepeat Shape
TIP
This component also supports a return function
A new need arises that when you need something to draw similar to background-repeat use ImageRepeat.
For image property you can use:
image An element to draw into the context. The specification permits any canvas image source, specifically,
- an HTMLImageElement,
- an SVGImageElement,
- an HTMLVideoElement,
- an HTMLCanvasElement,
- an ImageBitmap,
- an OffscreenCanvas,
- an VideoFrame,
- or
stringis url image loaded. Thisurlmust have been loaded byawait loadImage('<url>')before. refer to loadImage
In addition, this shape also provides a few other parameters:
Require Options
| Name | Type | Description |
|---|---|---|
| image | MayBeRef<CanvasImageSource | string> | multiply by a value as stated above |
Inherit Shape
| Name | Type | Description |
|---|---|---|
| x | MayBeRef<number> | offset x |
| y | MayBeRef<number> | offset y |
Optional Options
| Name | Type | Default | Description |
|---|---|---|---|
| scrollWidth | MayBeRef<number> | = imageWidth | The width of the element to be visible. for example if scrollWidth=100 the image will be repeatedly drawn until the total size >= 100 |
| scrollHeight | MayBeRef<number> | = imageHeight | The height of the element to be visible. for example if scrollHeight=100 the image will be repeatedly drawn until the total size >= 100 |
| scrollTop | MayBeRef<number> | 0 | position y scrolled to it similar to background-position |
| scrollLeft | MayBeRef<number> | 0 | position x scrolled to it similar to background-position |
| whileDraw | MayBeRef<boolean> | false | Is it constantly redrawing and ignoring the cache policy? |
TIP
The crop feature provided by this component is very simple. If you need more powerful cropping (e.g. Tile) use cropImage
Demo
ts
import { Stage, Layer, ImageRepeat, loadImage } from "fcanvas"
const stage = new Stage().mount("#app")
const layer = new Layer().addTo(stage)
const image = new ImageRepeat({
x: stage.size.width / 2,
y: stage.size.height / 2,
image: await loadImage("https://google.com/favicon.ico"),
scrollWidth: 300,
scrollHeight: 150,
scrollTop: 20
}).addTo(layer)