Feat:新增拖拽调整图片大小的最小值实例化选项

This commit is contained in:
街角小林
2024-10-12 10:09:59 +08:00
parent 48da6cb642
commit 6ffd26fd7f
2 changed files with 22 additions and 3 deletions

View File

@@ -441,6 +441,9 @@ export const defaultOpt = {
beforeDeleteNodeImg: null,
// 删除和调整两个按钮的大小
imgResizeBtnSize: 25,
// 最小允许缩放的尺寸,请传入>=0的数字
minImgResizeWidth: 50,
minImgResizeHeight: 50,
// 最大允许缩放的尺寸依据主题的配置即主题的imgMaxWidth和imgMaxHeight配置如果设置为false那么使用maxImgResizeWidth和maxImgResizeHeight选项
maxImgResizeWidthInheritTheme: true,
// 最大允许缩放的尺寸maxImgResizeWidthInheritTheme选项设置为false时生效不限制最大值可传递Infinity

View File

@@ -229,11 +229,26 @@ class NodeImgAdjust {
if (!this.isMousedown) return
e.preventDefault()
const { scaleX, scaleY } = this.mousedownDrawTransform
const {
// 图片原始大小
const { width: imageOriginWidth, height: imageOriginHeight } =
this.node.getData('imageSize')
let {
minImgResizeWidth,
minImgResizeHeight,
maxImgResizeWidthInheritTheme,
maxImgResizeWidth,
maxImgResizeHeight
} = this.mindMap.opt
// 主题设置的最小图片宽高
const minRatio = minImgResizeWidth / minImgResizeHeight
const oRatio = imageOriginWidth / imageOriginHeight
if (minRatio > oRatio) {
// 如果最小值比例大于图片原始比例,那么要调整高度最小值
minImgResizeHeight = minImgResizeWidth / oRatio
} else {
// 否则调整宽度最小值
minImgResizeWidth = minImgResizeHeight * oRatio
}
// 主题设置的最大图片宽高
let imgMaxWidth, imgMaxHeight
if (maxImgResizeWidthInheritTheme) {
@@ -246,10 +261,11 @@ class NodeImgAdjust {
imgMaxWidth = imgMaxWidth * scaleX
imgMaxHeight = imgMaxHeight * scaleY
// 计算当前拖拽位置对应的图片的实时大小
const { width: imageOriginWidth, height: imageOriginHeight } =
this.node.getData('imageSize')
let newWidth = Math.abs(e.clientX - this.rect.x - this.mousedownOffset.x)
let newHeight = Math.abs(e.clientY - this.rect.y - this.mousedownOffset.y)
// 限制最小值
if (newWidth < minImgResizeWidth) newWidth = minImgResizeWidth
if (newHeight < minImgResizeHeight) newHeight = minImgResizeHeight
// 限制最大值
if (newWidth > imgMaxWidth) newWidth = imgMaxWidth
if (newHeight > imgMaxHeight) newHeight = imgMaxHeight