当前位置：首页 > news >正文

LeaferJS创建支持缩放、平移的画布，并绘制简单图形

news 2025/8/28 9:49:12

文章目录

介绍
原生JS使用LeaferJS的简单示例
原生JS使用LeaferJS并支持缩放平移画布
Vue中使用LeaferJS并支持缩放平移

介绍

LeaferJS官网：https://www.leaferjs.com/

官方快速上手的教程地址：https://www.leaferjs.com/ui/guide/install/ui/start.html

原生JS使用LeaferJS的简单示例

通过script标签引入leaferjs，并绘制矩形，支持选中矩形后对矩形的平移，但没法缩放。

<!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参数。

<!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”）
在一个组件中添加代码：

<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>