1. 前言
思维导图是一个常用的思维工具，它通过树形结构的方式清晰地展示了各种主题和子主题间的关系。在Web应用程序中，利用JavaScript库来创建思维导图是非常常见的做法，jsmind就是一个非常流行的JavaScript库，它允许我们创建简单但功能齐全的思维导图。在Vue中使用jsmind创建思维导图非常容易，但是jsmind本身并没有提供缩放和平移功能。在本文中，我们将介绍如何利用Vue和jsmind来实现思维导图的缩放和平移操作。
2. 安装jsmind和vue-jsmind模块
为了能够使用jsmind库，我们首先需要在我们的项目中安装它。我们可以使用npm来安装jsmind，命令如下：
npm install jsmind --save其他的Node.js包也需要一起安装：
npm install --save jsmind@0.4.1
npm install --save jquery@3.5.1
npm install --save ejs@3.1.5
我们还需要安装Vue-jSmart模块，它提供了Vue组件用来渲染jsmind数据。命令如下：
npm install vue-jsmind --save3. 创建一个基本的思维导图
我们要开始创建我们的思维导图。下面的代码演示了如何使用jsmind库创建一个基本的思维导图：
var mind = {
"meta":{
"name":"example",
"author":"author",
"version":"0.2"
},
"format":"node_array",
"data":[
{"id":"root", "isroot":true, "topic":"example"},
{"id":"sub1", "parentid":"root", "topic":"subtopic 1"},
{"id":"sub2", "parentid":"root", "topic":"subtopic 2"}
]
};
var options = {
//加上以下两个属性之一可以放置节点
//adjustment.x: 节点相对于屏幕横向方向的值，默认为0，表示位于中心。
//adjustment.y: 节点相对于屏幕纵向方向的值，默认为0，表示位于中心。
adjustment: {x:0, y:0},
};
var jm = new jsMind({
container:'jsmind_container',
editable:true,
theme:'default', //主题风格，可以是'default','primary'等等
mode :'side', //展现方式，有floating,top,left,right等方式
support_html:true,
view:{
canvasSizes:{
w:10000,
h:10000
}
},
layout:{
hspace:80,
vspace:18,
pspace:13
} //布局样式
});
jm.show(mind,options);
上述代码将创建一个只有root，sub1和sub2三个节点的思维导图。下面是jsmind容器的HTML代码，其中， 我们使用“#jsmind_container”选中了JSMind的容器：
<div id="jsmind_container"></div>我们可以运行上面的代码并在浏览器中打开HTML文件来看到思维导图。思维导图看起来不错，但是我们现在想在其中实现缩放和平移。
4. 控制缩放和平移
4.1 缩放
jsmind没有提供缩放API，但是我们可以使用缩放x和缩放y来实现缩放。有两种方法来实现缩放操作。
方法一：鼠标滚轮缩放
我们可以利用鼠标滚轮事件，在浏览器中监听缩放事件。下面是代码示例：
mounted(): {
let container = document.querySelector('#jsmind_container');
var scale = 1.0;
container.addEventListener('wheel',function(event){
event.preventDefault();
var mouseX = event.pageX - container.offsetLeft;
var mouseY = event.pageY - container.offsetTop;
var wheel = event.wheelDelta/120;
var zoom = Math.exp(wheel*0.2);
if(scale*zoom > 2 || scale * zoom < 0.5){
return false;
}else {
scale *= zoom;
}
var transformOrigin = mouseX + "px " + mouseY + "px";
container.style.transform = "scale(" + scale + ")";
container.style.transformOrigin= transformOrigin;
})
}
上面的代码允许我们使用鼠标滚轮来缩放思维导图。我们通过计算鼠标指针在容器内的位置，并应用当前的缩放比率来更新缩放计算值。我们使用css的transform属性来更新容器的缩放比率和缩放的中心点。transform-origin属性允许我们指定中心点位置。
方法二：缩放按钮控制
在缩放按钮上添加事件监听器，并在每次点击时计算缩放比率即可实现。以下是代码示例：
data: {
scale: 1.0, //初始缩放比例
},
methods: {
zoomIn() {
if (this.scale >= 2) {
return;
}
this.scale += 0.1;
this.updateTransform();
},
zoomOut() {
if (this.scale <= 0.5) {
return;
}
this.scale -= 0.1;
this.updateTransform();
},
updateTransform() {
let container = document.querySelector('#jsmind_container');
container.style.transform = "scale(" + this.scale + ")";
}
}
我们通过一个名为scale的Vue数据来存储当前的缩放比率。我们在缩放按钮的点击事件上实现了zoomIn()和zoomOut()方法。在这些方法中，我们检查缩放比率是否达到上限或下限，如果没有，则增加或减少比率。我们还编写了updateTransform()方法来动态更新css 样式，并将当前比率应用于思维导图容器的transform属性。
4.2 平移
我们可以使用鼠标拖拽事件来实现平移，以下是代码示例：
mounted() {
let container = document.querySelector('#jsmind_container');
let prevX = 0, prevY = 0, isMoving = false;
container.addEventListener('mousedown',function(event){
isMoving = true;
prevX = event.clientX;
prevY = event.clientY;
container.style.cursor = "grabbing";
});
container.addEventListener('mouseup',function(event){
isMoving = false;
container.style.cursor = "default";
});
container.addEventListener('mousemove',function(event){
if (isMoving === false) {
return;
}
container.style.cursor = "grabbing";
let dx = event.clientX - prevX;
let dy = event.clientY - prevY;
container.scrollLeft -= dx;
container.scrollTop -= dy;
prevX = event.clientX;
prevY = event.clientY;
});
}
在上述代码中，我们使用三个变量 prevX， prevY和 isMoving 来记录拖拽的状态。当鼠标在容器上移动时，我们检查 isMoving 的状态，如果为 true，则计算鼠标光标在容器内的偏移，并应用此偏移来更新容器的滚动位置。我们使用CSS属性cursor来修改鼠标光标的显示，为其加上一个手柄表示正在移动，具体参考css样式。
5. 总结
在Vue中利用jsmind来实现思维导图的缩放和平移操作非常简单。我们可以使用浏览器API来监听事件并控制视图进行缩放和平移。通过添加事件监听器和自定义样式，我们可以轻松地实现高效的自动化思维导图。
参考jsmind官方文档: https://github.com/hizzgdev/jsmind