Feat:新增拖拽调整图片大小的最小值实例化选项
This commit is contained in:
parent
48da6cb642
commit
6ffd26fd7f
@ -441,6 +441,9 @@ export const defaultOpt = {
|
|||||||
beforeDeleteNodeImg: null,
|
beforeDeleteNodeImg: null,
|
||||||
// 删除和调整两个按钮的大小
|
// 删除和调整两个按钮的大小
|
||||||
imgResizeBtnSize: 25,
|
imgResizeBtnSize: 25,
|
||||||
|
// 最小允许缩放的尺寸,请传入>=0的数字
|
||||||
|
minImgResizeWidth: 50,
|
||||||
|
minImgResizeHeight: 50,
|
||||||
// 最大允许缩放的尺寸依据主题的配置,即主题的imgMaxWidth和imgMaxHeight配置,如果设置为false,那么使用maxImgResizeWidth和maxImgResizeHeight选项
|
// 最大允许缩放的尺寸依据主题的配置,即主题的imgMaxWidth和imgMaxHeight配置,如果设置为false,那么使用maxImgResizeWidth和maxImgResizeHeight选项
|
||||||
maxImgResizeWidthInheritTheme: true,
|
maxImgResizeWidthInheritTheme: true,
|
||||||
// 最大允许缩放的尺寸,maxImgResizeWidthInheritTheme选项设置为false时生效,不限制最大值可传递Infinity
|
// 最大允许缩放的尺寸,maxImgResizeWidthInheritTheme选项设置为false时生效,不限制最大值可传递Infinity
|
||||||
|
|||||||
@ -229,11 +229,26 @@ class NodeImgAdjust {
|
|||||||
if (!this.isMousedown) return
|
if (!this.isMousedown) return
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
const { scaleX, scaleY } = this.mousedownDrawTransform
|
const { scaleX, scaleY } = this.mousedownDrawTransform
|
||||||
const {
|
// 图片原始大小
|
||||||
|
const { width: imageOriginWidth, height: imageOriginHeight } =
|
||||||
|
this.node.getData('imageSize')
|
||||||
|
let {
|
||||||
|
minImgResizeWidth,
|
||||||
|
minImgResizeHeight,
|
||||||
maxImgResizeWidthInheritTheme,
|
maxImgResizeWidthInheritTheme,
|
||||||
maxImgResizeWidth,
|
maxImgResizeWidth,
|
||||||
maxImgResizeHeight
|
maxImgResizeHeight
|
||||||
} = this.mindMap.opt
|
} = this.mindMap.opt
|
||||||
|
// 主题设置的最小图片宽高
|
||||||
|
const minRatio = minImgResizeWidth / minImgResizeHeight
|
||||||
|
const oRatio = imageOriginWidth / imageOriginHeight
|
||||||
|
if (minRatio > oRatio) {
|
||||||
|
// 如果最小值比例大于图片原始比例,那么要调整高度最小值
|
||||||
|
minImgResizeHeight = minImgResizeWidth / oRatio
|
||||||
|
} else {
|
||||||
|
// 否则调整宽度最小值
|
||||||
|
minImgResizeWidth = minImgResizeHeight * oRatio
|
||||||
|
}
|
||||||
// 主题设置的最大图片宽高
|
// 主题设置的最大图片宽高
|
||||||
let imgMaxWidth, imgMaxHeight
|
let imgMaxWidth, imgMaxHeight
|
||||||
if (maxImgResizeWidthInheritTheme) {
|
if (maxImgResizeWidthInheritTheme) {
|
||||||
@ -246,10 +261,11 @@ class NodeImgAdjust {
|
|||||||
imgMaxWidth = imgMaxWidth * scaleX
|
imgMaxWidth = imgMaxWidth * scaleX
|
||||||
imgMaxHeight = imgMaxHeight * scaleY
|
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 newWidth = Math.abs(e.clientX - this.rect.x - this.mousedownOffset.x)
|
||||||
let newHeight = Math.abs(e.clientY - this.rect.y - this.mousedownOffset.y)
|
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 (newWidth > imgMaxWidth) newWidth = imgMaxWidth
|
||||||
if (newHeight > imgMaxHeight) newHeight = imgMaxHeight
|
if (newHeight > imgMaxHeight) newHeight = imgMaxHeight
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user