Question

我实现了拖放图像，现在我想在调整大小时限制图像的比例。

/**
 * Variable: constrainChildrenOnResize
 * 
 * Specifies if children should be constrained according to the <constrainChildren>
 * switch if cells are resized (including via <foldCells>). Default is false for
 * backwards compatiblity.
 */
mxGraph.prototype.constrainChildrenOnResize = false;

我将此设置为true但不起作用：s

此功能需要什么API /属性..

Answer 1

constrainChildrenOnResize负责调整大小的单元格的子项的位置和大小。这意味着孩子应该保持相对于父母细胞的位置。

在您的情况下，我建议使用mxVertexHandler方法扩展union。在this example中，您可以看到如何实现最小宽度/最小高度限制。使用此示例，您可以编写自己的约束规则。

这是我的简单解决方案：

var vertexHandlerUnion = mxVertexHandler.prototype.union;
mxVertexHandler.prototype.union = function (bounds) {

   var result = vertexHandlerUnion.apply(this, arguments);
   var coff = bounds.width / bounds.height 
   result.width = result.height * coff; 

   return result;
};

因此，每次在拖动缩放器时移动鼠标都会调用此函数。

bounds - 对象，始终相同并表示单元格的旧几何图形（在调整大小之前）

结果 - 对象，表示将要应用的新值。在此行广告return语句之间，您可以放置修改结果所需的任何代码。

在我的简单示例中，我只获得单元格宽度和高度之间的初始关系（ coff ），然后通过将coff和新高度相乘来设置新宽度。如果拖动角落或顶部/底部，它将起作用。在实际项目中，这个逻辑应该略微扩展，或者你应该只使角落处理程序可见。

顺便说一句，此代码适用于图表上所有可调整大小的单元格。如果您只想将它应用于图像或其他类型的单元格 - 您可以在重新计算之前放置条件并检查单元格类型。您可以通过union函数内的this.state.cell或this.state获取当前单元格或其状态。例如，仅适用于椎体：

... ...
var result = vertexHandlerUnion.apply(this, arguments);
if (this.state.cell.isVertex()) {
   //calculations here
}
return result;

在调整图像大小时约束比例

1 个答案: