0

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

/**
 * 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/属性来实现这个功能..

4

1 回答 1

0

constrainChildrenOnResize负责resized cell的children的定位和大小。这意味着孩子们应该保持他们相对于父单元格的位置。

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

这是我的简单解决方案：

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 - 对象，始终相同并表示单元格的旧几何形状（调整大小之前）

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

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

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

... ...
var result = vertexHandlerUnion.apply(this, arguments);
if (this.state.cell.isVertex()) {
   //calculations here
}
return result;
于 2016-06-29T13:52:31.530 回答