Using in HTML โ
Quickly use LeaferJS by importing it via script tags.
Note
Image / PointerEvent / DragEvent conflict with browser global variables, so you must use the aliases below.
html
<script src="https://unpkg.com/leafer-ui@2.0.9/dist/web.min.js"></script>
<script>
const { Leafer } = LeaferUI // global variable containing all leafer-ui features
// Image, PointerEvent, and DragEvent conflict with browser globals, use aliases instead
const { MyImage, MyPointerEvent, MyDragEvent } = LeaferUI
// ...
</script>html
<script src="https://unpkg.com/leafer-ui@2.0.9/dist/web.js"></script>
<script>
const { Leafer } = LeaferUI // global variable containing all leafer-ui features
// Image, PointerEvent, and DragEvent conflict with browser globals, use aliases instead
const { MyImage, MyPointerEvent, MyDragEvent } = LeaferUI
// ...
</script>html
<script type="module">
import { Leafer } from 'https://unpkg.com/leafer-ui@2.0.9/dist/web.module.min.js'
// ...
</script>html
<script type="module">
import { Leafer } from 'https://unpkg.com/leafer-ui@2.0.9/dist/web.module.js'
// ...
</script>Example โ
html
<!DOCTYPE html>
<html>
<head>
<title>Demo | Leafer UI</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<script src="https://unpkg.com/leafer-ui@2.0.7/dist/web.min.js"></script>
</head>
<body></body>
<script>
var leafer = new LeaferUI.Leafer({ view: window })
var rect = new LeaferUI.Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: '#32cd79',
cornerRadius: [50, 80, 0, 80],
draggable: true,
})
leafer.add(rect)
</script>
</html>