diff --git a/simple-mind-map/src/constants/defaultOptions.js b/simple-mind-map/src/constants/defaultOptions.js index 51d68aea..6d039b57 100644 --- a/simple-mind-map/src/constants/defaultOptions.js +++ b/simple-mind-map/src/constants/defaultOptions.js @@ -13,7 +13,7 @@ export const defaultOpt = { // 主题配置,会和所选择的主题进行合并 themeConfig: {}, // 放大缩小的增量比例 - scaleRatio: 0.1, + scaleRatio: 0.2, // 最多显示几个标签 maxTag: 5, // 导出图片时的内边距 diff --git a/simple-mind-map/src/core/view/View.js b/simple-mind-map/src/core/view/View.js index 3f756dc7..5caaccc2 100644 --- a/simple-mind-map/src/core/view/View.js +++ b/simple-mind-map/src/core/view/View.js @@ -73,12 +73,12 @@ class View { // 鼠标滚轮,向上和向左,都是缩小 case CONSTANTS.DIR.UP: case CONSTANTS.DIR.LEFT: - this.narrow() + this.narrow(e.clientX, e.clientY) break // 鼠标滚轮,向下和向右,都是放大 case CONSTANTS.DIR.DOWN: case CONSTANTS.DIR.RIGHT: - this.enlarge() + this.enlarge(e.clientX, e.clientY) break } } else { @@ -190,28 +190,27 @@ class View { } // 缩小 - narrow(cx = this.mindMap.width / 2, cy = this.mindMap.height / 2) { - let scale - if (this.scale - this.mindMap.opt.scaleRatio > 0.1) { - scale = this.scale - this.mindMap.opt.scaleRatio - } else { - scale = 0.1 - } - this.scaleInCenter(cx, cy, scale) + narrow(cx, cy) { + const scale = Math.max(this.scale - this.mindMap.opt.scaleRatio, 0.1) + this.scaleInCenter(scale, cx, cy) this.transform() this.mindMap.emit('scale', this.scale) } // 放大 - enlarge(cx = this.mindMap.width / 2, cy = this.mindMap.height / 2) { + enlarge(cx, cy) { const scale = this.scale + this.mindMap.opt.scaleRatio - this.scaleInCenter(cx, cy, scale) + this.scaleInCenter(scale, cx, cy) this.transform() this.mindMap.emit('scale', this.scale) } - // 基于画布中心进行缩放 - scaleInCenter(cx, cy, scale) { + // 基于指定中心进行缩放,cx,cy 可不指定,此时会使用画布中心点 + scaleInCenter(scale, cx, cy) { + if (cx === undefined || cy === undefined) { + cx = this.mindMap.width / 2 + cy = this.mindMap.height / 2 + } const prevScale = this.scale const ratio = 1 - scale / prevScale const dx = (cx - this.x) * ratio @@ -224,7 +223,7 @@ class View { // 设置缩放 setScale(scale, cx, cy) { if (cx !== undefined && cy !== undefined) { - this.scaleInCenter(cx, cy, scale) + this.scaleInCenter(scale, cx, cy) } else { this.scale = scale }