Javascript 无法在Draft.js中垂直调整图像大小

我正在使用Draft.js插件

我正在尝试用原始的长宽比调整图像的大小

但是，对于下面的代码，当我使用鼠标调整图像底部边缘的大小时，光标发生了变化，但无法调整大小。它只适用于左右边缘

const resizeablePlugin = createResizeablePlugin({
  vertical: 'relative',
  horizontal: 'relative'
});

---

查看之后，我仍然不知道是什么原因造成的。

该插件的开发人员似乎没有提供这样的机会，当您按顶部或底部边缘调整大小时，可以通过保存比率更改图像大小。配置选项

vertical:'relative'

意味着插件应该以相对单位（百分比）设置

height

值。您可以使用devtools检查，当您尝试调整图像的大小时，

height

值是否会更改。但是我们应该改变

宽度

值，以达到在使用保存比率调整图像大小时的行为

它可以通过稍微重写源代码来实现。检查

选中

createDecorator.js

它与存储在

/node\u modules/draft js resizeable plugin/lib/createDecorator.js

中的文件相同。我改变了什么？查找

doDrag

函数（我使用

/！

添加或更改的所有字符串进行营销）：

。。。
var startWidth=parseInt（document.defaultView.getComputedStyle（pane）.width，10）；
var startHeight=parseInt（document.defaultView.getComputedStyle（pane）.height，10）；
var imageRect=pane.getBoundingClientRect（）；/！
var imageRatio=imageRect.width/imageRect.height；/！获取图像比率
//执行实际的拖动操作
var doDrag=函数doDrag（dragEvent）{
var width=startWidth+dragEvent.clientX-startX；
变量高度=startHeight+dragEvent.clientY-startY；
var block=store.getEditorRef（）.refs.editor；
宽度=block.clientWidth<宽度？block.clientWidth:宽度；
高度=block.clientHeight<高度？block.clientHeight:高度；
var widthForPercCalculation=（isTop | | isBottom）和&vertical==‘相对’？高度*图像比率：宽度；/！以百分比计算新宽度值
var widthPerc=100/block.clientWidth*widthForPercCalculation；/！
var heightPerc=100/block.clientHeight*高度；
var newState={}；
如果（（isLeft | | isRight）&&horizontal==‘相对’）{
newState.width=resizeSteps？圆形（widthPerc，resizeSteps）：widthPerc；
}else if（（isLeft | | isRight）&水平==‘绝对’）{
newState.width=resizeSteps？圆形（width，resizeSteps）：宽度；
}
if（（isTop | | isBottom）&&vertical==‘relative’）{
newState.width=resizeSteps？round（widthPerc，resizeSteps）：widthPerc；//！这里我们更新的是宽度而不是高度值
}else if（（isTop | | isBottom）&&vertical==‘绝对’）{
newState.height=resizeSteps？圆形（height，resizeSteps）：高度；
}
...

我想你可以要求这个插件开发团队添加这个特性或者

---

分叉项目。

此插件的开发人员似乎没有提供这样的机会，当您按上边缘或下边缘调整大小时，可以使用保存率更改图像大小。配置选项

垂直：“相对”

意味着插件应以相对单位（百分比）设置

高度

值。您可以使用devtools检查，当您尝试调整图像大小时，

高度

值确实会更改。但我们应该更改

宽度

值，以达到使用保存比率调整图像大小时的行为

可以通过稍微重写源代码来实现。请检查

检查

createDecorator.js

它是存储在

/node\u modules/draft js resizeable plugin/lib/createDecorator.js

中的同一个文件。我对它做了哪些更改？查找

doDrag

函数（我使用

/！

添加或更改的所有字符串进行营销）：

。。。
var startWidth=parseInt（document.defaultView.getComputedStyle（pane）.width，10）；
var startHeight=parseInt（document.defaultView.getComputedStyle（pane）.height，10）；
var imageRect=pane.getBoundingClientRect（）；/！
var imageRatio=imageRect.width/imageRect.height；//！获取图像比率
//执行实际的拖动操作
var doDrag=函数doDrag（dragEvent）{
var width=startWidth+dragEvent.clientX-startX；
变量高度=startHeight+dragEvent.clientY-startY；
var block=store.getEditorRef（）.refs.editor；
宽度=block.clientWidth<宽度？block.clientWidth:宽度；
高度=block.clientHeight<高度？block.clientHeight:高度；
var widthForPercCalculation=（isTop | | isBottom）和&vertical==‘相对’？高度*图像比率：宽度；/！以百分比计算新宽度值
var widthPerc=100/block.clientWidth*widthForPercCalculation；/！
var heightPerc=100/block.clientHeight*高度；
var newState={}；
如果（（isLeft | | isRight）&&horizontal==‘相对’）{
newState.width=resizeSteps？圆形（widthPerc，resizeSteps）：widthPerc；
}else if（（isLeft | | isRight）&水平==‘绝对’）{
newState.width=resizeSteps？圆形（width，resizeSteps）：宽度；
}
if（（isTop | | isBottom）&&vertical==‘relative’）{
newState.width=resizeSteps？round（widthPerc，resizeSteps）：widthPerc；//！这里我们更新的是宽度而不是高度值
}else if（（isTop | | isBottom）&&vertical==‘绝对’）{
newState.height=resizeSteps？圆形（height，resizeSteps）：高度；
}
...

我想你可以要求这个插件开发团队添加这个特性或者

---

完成项目。

非常感谢您的帮助和时间！非常感谢您的帮助和时间！

...
var startWidth = parseInt(document.defaultView.getComputedStyle(pane).width, 10);
var startHeight = parseInt(document.defaultView.getComputedStyle(pane).height, 10);

var imageRect = pane.getBoundingClientRect(); // !
var imageRatio = imageRect.width / imageRect.height; // ! get image ratio

// Do the actual drag operation
var doDrag = function doDrag(dragEvent) {
  var width = startWidth + dragEvent.clientX - startX;
  var height = startHeight + dragEvent.clientY - startY;
  var block = store.getEditorRef().refs.editor;
  width = block.clientWidth < width ? block.clientWidth : width;
  height = block.clientHeight < height ? block.clientHeight : height;

  var widthForPercCalculation = (isTop || isBottom) && vertical === 'relative' ? height * imageRatio : width; // ! calculate new width value in percents

  var widthPerc = 100 / block.clientWidth * widthForPercCalculation; // !
  var heightPerc = 100 / block.clientHeight * height;

  var newState = {};
  if ((isLeft || isRight) && horizontal === 'relative') {
    newState.width = resizeSteps ? round(widthPerc, resizeSteps) : widthPerc;
  } else if ((isLeft || isRight) && horizontal === 'absolute') {
    newState.width = resizeSteps ? round(width, resizeSteps) : width;
  }

  if ((isTop || isBottom) && vertical === 'relative') {
    newState.width = resizeSteps ? round(widthPerc, resizeSteps) : widthPerc; // ! here we update width not height value
  } else if ((isTop || isBottom) && vertical === 'absolute') {
    newState.height = resizeSteps ? round(height, resizeSteps) : height;
  }
...