Я использую плагин Draft.js Resizeable.
Я пытаюсь изменить размер изображения с исходным соотношением длины к ширине.
Однако для приведенного ниже кода, когда я использую мышь для изменения размера по нижнему краю изображения, курсор изменился, но его размер не изменился. Это хорошо работает только на левом и правом краю.
const resizeablePlugin = createResizeablePlugin({
vertical: 'relative',
horizontal: 'relative'
});
После просмотра исходный код, я так и не понял, в чем причина.
Похоже, разработчики этого плагина не предусмотрели возможность изменять размер изображения с коэффициентом сохранения при изменении размера по верхнему или нижнему краю. Опция конфигурации vertical: 'relative' означает, что плагин должен установить значение height в относительных единицах (процентах). Вы можете проверить с помощью devtools, что при попытке изменить размер изображения значение height действительно меняется. Но мы должны изменить значение width, чтобы добиться поведения, когда мы изменяем размер изображения с коэффициентом сохранения.
Этого можно добиться, немного переписав исходный код. Проверьте эту ветку вашей песочницы.
Проверьте createDecorator.js, это тот же файл, который хранится в /node_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; // ! 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;
}
...
Я думаю, вы можете попросить эту команду разработчиков плагина добавить эту функцию или разветвить проект.
