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

时间:2016-06-05 11:30:31

标签: jgraph mxgraph

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

/**
 * 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 /属性..

1 个答案:

答案 0 :(得分:0)

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.cellthis.state获取当前单元格或其状态。 例如,仅适用于椎体:

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