文章目录
介绍
LeaferJS官网：https://www.leaferjs.com/
官方快速上手的教程地址：https://www.leaferjs.com/ui/guide/install/ui/start.html
原生JS使用LeaferJS的简单示例
通过script标签引入leaferjs，并绘制矩形，支持选中矩形后对矩形的平移，但没法缩放。
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.0/dist/web.min.js"></script>
</head>
<body></body>
<script>
var leafer = new LeaferUI.Leafer({
view: window,
});
var rect = new LeaferUI.Rect({
x: 150,
y: 100,
width: 280,
height: 200,
fill: "#32cd79",
draggable: true,
});
leafer.add(rect);
</script>
</html>制作的Gif效果：
原生JS使用LeaferJS并支持缩放平移画布
需要引入leaferjs视口插件：https://www.leaferjs.com/ui/plugin/in/viewport/
还需要配置type和wheel参数。
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.0/dist/web.min.js"></script>
<!-- 引入视口插件 -->
<script src="https://unpkg.com/@leafer-in/viewport@1.9.4/dist/viewport.min.js"></script>
</head>
<body></body>
<script>
var leafer = new LeaferUI.Leafer({
view: window,
type: "design",
wheel: { zoomMode: true },
});
var rect = new LeaferUI.Rect({
x: 150,
y: 100,
width: 280,
height: 200,
fill: "#32cd79",
draggable: true,
});
leafer.add(rect);
</script>
</html>效果图：
Vue中使用LeaferJS并支持缩放平移
-
创建一个简单的vue2项目
-
安装依赖：
npm install leafer-ui（用的版本是"leafer-ui": "^1.9.4"） -
安装依赖：
npm install @leafer-in/viewport（用的版本是"@leafer-in/viewport": "^1.9.4"） -
在一个组件中添加代码：
html
<template>
<div class="home">
<canvas id="box"></canvas>
</div>
</template>
<script>
// #应用与引擎配置 - 鼠标滚动直接缩放视图 [Leafer]
import { Leafer, Rect, Path } from "leafer-ui";
import "@leafer-in/viewport"; // 导入视口插件
export default {
name: "HomeView",
components: {},
mounted() {
const leafer = new Leafer({
view: "box",
type: "design",
wheel: { zoomMode: true },
});
leafer.add(new Rect({ x: 150, y: 200, fill: "#32cd79", draggable: true }));
leafer.add(new Rect({ x: 280, y: 70, fill: "#32cd79", draggable: true }));
const path = new Path({
scale: 0.1,
path: "M945.344 586.304c-13.056-93.44-132.48-98.048-132.48-98.048 0-29.888-39.808-47.424-39.808-47.424L201.664 440.832c-36.736 0-42.112 51.264-42.112 51.264 7.68 288 181.44 382.976 181.44 382.976l299.456 0c42.88-31.36 101.888-122.56 101.888-122.56 9.216 3.072 72.768-0.832 97.984-6.144C865.6 740.992 958.336 679.68 945.344 586.304zM365.568 825.28c-145.472-105.664-130.944-328.576-130.944-328.576l80.448 0c-44.416 126.4 43.648 285.696 55.872 307.904C383.232 826.816 365.568 825.28 365.568 825.28zM833.472 694.272c-37.568 22.272-65.152 7.68-65.152 7.68 39.04-54.4 42.112-159.296 42.112-159.296 6.848 2.304 12.288-26.048 61.312 23.744C920.768 616.128 871.04 672.064 833.472 694.272z M351.68 129.856c0 0-119.424 72.832-44.416 140.928 75.008 68.16 68.16 93.44 24.512 153.216 0 0 81.92-41.344 71.168-104.192s-89.6-94.208-72.768-137.792C347.136 138.304 351.68 129.856 351.68 129.856z M615.232 91.648c0 0-119.488 72.832-44.352 140.928 74.944 68.16 68.032 93.44 24.448 153.216 0 0 81.984-41.344 71.232-104.192-10.688-62.784-89.6-94.208-72.832-137.792C610.624 100.032 615.232 91.648 615.232 91.648z M491.136 64c0 0-74.304 6.144-88.128 78.144C389.248 214.144 435.968 240.96 471.936 276.992 507.904 312.96 492.608 380.352 452.032 427.904c0 0 72.768-25.344 89.6-94.976 16.832-69.76-17.344-94.272-52.8-134.784C453.312 157.504 456.64 83.968 491.136 64z",
fill: "#32cd79",
draggable: true,
});
leafer.add(path);
},
};
</script>
<style scoped>
.home {
width: 90vw;
height: 90vh;
}
#box {
border: 1px solid #c56565;
}
</style>效果图：
