在 HTML 中使用
通过引入 script 的方式来快速使用 LeaferJS。
注意事项
Image / PointerEvent / DragEvent 会与浏览器的全局变量冲突，需使用以下别名。
html
<script src="https://unpkg.com/leafer-ui@1.3.2/dist/web.min.js"></script>
<script>
const { Leafer } = LeaferUI // 全局变量，包含 leafer-ui 的所有功能
// Image、PointerEvent、DragEvent 会与浏览器的全局变量冲突，请使用以下别名代替
const { MyImage, MyPointerEvent, MyDragEvent } = LeaferUI
// ...
</script>html
<script src="https://unpkg.com/leafer-ui@1.3.2/dist/web.js"></script>
<script>
const { Leafer } = LeaferUI // 全局变量，包含 leafer-ui的所有功能
// Image、PointerEvent、DragEvent 会与浏览器的全局变量冲突，请使用以下别名代替
const { MyImage, MyPointerEvent, MyDragEvent } = LeaferUI
// ...
</script>html
<script type="module">
import { Leafer } from 'https://unpkg.com/leafer-ui@1.3.2/dist/web.module.min.js'
// ...
</script>html
<script type="module">
import { Leafer } from 'https://unpkg.com/leafer-ui@1.3.2/dist/web.module.js'
// ...
</script>https://unpkg.com 无法访问时，可替换为 https://cdn.jsdelivr.net/npm
示例
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@1.3.2/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>