在 HTML 中使用
通过引入 script 的方式来快速使用 LeaferJS。
注意事项
Image / PointerEvent / DragEvent 会与浏览器的全局变量冲突，需使用以下别名。
html
<script src="https://unpkg.com/leafer-ui@1.9.12/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.9.12/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.9.12/dist/web.module.min.js' // ... </script>html
<script type="module"> import { Leafer } from 'https://unpkg.com/leafer-ui@1.9.12/dist/web.module.js' // ... </script>示例
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.9.12/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>