-
Notifications
You must be signed in to change notification settings - Fork 0
/
ImageSprite.ts
70 lines (56 loc) · 1.58 KB
/
ImageSprite.ts
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
import { Locator } from "../hook/locator";
import { Position } from "./position";
import { Sprite } from ".";
import { Point, Size, isPoint } from "../type";
import { z } from "zod";
/**
* ```ts
* const src = "/asset/eth.png"
* const size = { width: 80, height: 80 }
* const position = { left: 400, top: 320 }
*
* const image = new ImageSprite({ src, size, position }) // [!code highlight]
* stadium.add(image)
* ```
* 이미지를 그릴 수 있는 Sprite입니다.
*/
export class ImageSprite extends Sprite {
public element = document.createElement("img");
private _image!: string;
private size: Size;
static propScheme = z.object({
src: z.string(),
position: z.custom(isPoint),
size: z.object({ width: z.number(), height: z.number() }),
});
constructor(props: { src: string; position: Point; size: Size }) {
ImageSprite.propScheme.parse(props);
super(new Position(props.position.left, props.position.top));
this._image = props.src;
this.size = props.size;
this.use([new Locator()]);
}
draw(): void {
const element = this.element;
const style = element.style;
style.setProperty("width", `calc(var(--x-ratio) * ${this.size.width}px)`);
style.setProperty("height", `calc(var(--y-ratio) * ${this.size.height}px)`);
element.src = this.image;
}
get image() {
return this._image;
}
/**
* 새 이미지를 설정합니다.
*
* ```ts
* sprite.image = "/asset/eth.png"
* ```
*
* @param value 새 이미지의 URL
*/
set image(value: string) {
this._image = value;
this.draw();
}
}