0.0.53 • Published 7 months ago

aurum-canvas v0.0.53

Weekly downloads
12
License
MIT
Repository
github
Last release
7 months ago

Aurum style scene graph management for rendering in canvas Depends on aurum.js

Allows creating canvas drawings using familar concepts from Aurum.js Supports data sources for all attributes and dynamic scene graphs with array data sources

<AurumCanvas width="200" height="200">
	<AurumRectangle x={a} y={20} fillColor="red" width={20} height={20}>
		<AurumRectangle x={20} y={a} fillColor="blue" width={20} height={20}></AurumRectangle>
	</AurumRectangle>
	<AurumRectangle x={50} y={50} fillColor="green" width={20} height={20}></AurumRectangle>
	<AurumText x={10} y={10} fillColor="black">
		{name}
	</AurumText>
</AurumCanvas>

Create canvas components just the way you create any aurum component:

function Triangle(props: { x: number; y: number }) {
	const { x, y } = props;

	return (
		<AurumGroup x={x} y={y}>
			<AurumLine lineWidth={3} strokeColor="red" x={0} y={0} tx={30} ty={30}></AurumLine>
			<AurumLine lineWidth={3} strokeColor="red" x={30} y={30} tx={-30} ty={30}></AurumLine>
			<AurumLine lineWidth={3} strokeColor="red" x={-30} y={30} tx={0} ty={0}></AurumLine>
		</AurumGroup>
	);
}

Reuse components that weren't even intended for use in the canvas:

<AurumCanvas width="200" height="200">
	<Switch state={triangular}>
		<SwitchCase when={true}>
			<Triangle x={50} y={50}></Triangle>
		</SwitchCase>
		<SwitchCase when={false}>
			<AurumRectangle x={50} y={50} fillColor="green" width={20} height={20}></AurumRectangle>
		</SwitchCase>
	</Switch>
</AurumCanvas>

Declarative animation and interaction support

<AurumCanvas width="400" height="200">
	<AurumRectangle
		onMouseDown={(e, target) => {
			state.update('highlight');
		}}
		state={state}
		strokeColor="red"
		x={0}
		y={0}
		width={30}
		height={30}
	>
		<State opacity={1} id="highlight" width={300} transitionTime={2000}></State>
	</AurumRectangle>
</AurumCanvas>
0.0.52

7 months ago

0.0.53

7 months ago

0.0.51

1 year ago

0.0.50

1 year ago

0.0.40

2 years ago

0.0.41

2 years ago

0.0.42

2 years ago

0.0.43

2 years ago

0.0.44

2 years ago

0.0.45

2 years ago

0.0.46

2 years ago

0.0.47

2 years ago

0.0.37

2 years ago

0.0.38

2 years ago

0.0.39

2 years ago

0.0.48

2 years ago

0.0.49

2 years ago

0.0.32

2 years ago

0.0.33

2 years ago

0.0.34

2 years ago

0.0.35

2 years ago

0.0.36

2 years ago

0.0.31

2 years ago

0.0.30

3 years ago

0.0.28

3 years ago

0.0.29

3 years ago

0.0.27

3 years ago

0.0.26

3 years ago

0.0.25

4 years ago

0.0.24

4 years ago

0.0.23

4 years ago

0.0.22

4 years ago

0.0.21

4 years ago

0.0.20

5 years ago

0.0.19

5 years ago

0.0.18

5 years ago

0.0.17

5 years ago

0.0.16

5 years ago

0.0.15

5 years ago

0.0.14

5 years ago

0.0.13

5 years ago

0.0.12

5 years ago

0.0.11

5 years ago

0.0.10

5 years ago

0.0.9

5 years ago

0.0.8

5 years ago

0.0.7

5 years ago

0.0.5

5 years ago

0.0.4

5 years ago

0.0.6

5 years ago

0.0.3

5 years ago

0.0.2

5 years ago

0.0.1

5 years ago