在 jointjs 图中一次调整所有单元格(矩形)的大小
Resize all cells (rect) at once in jointjs diagram
加载
jointjs图后,我想调整所有单元格(矩形)的大小,以便它们与具有较大文本的单元格具有相同的高度。
我设法一次调整所有元素的大小,如下所示:
_.each(paper.model.getElements(), function(el) {
el.set({ size: { width: 170 , height: newHeight} })
})
在我的元素中,有像"Rect"这样的元素和我用"path"创建的一些形状。当我设置新大小时,使用"path"创建的元素不仅会调整大小,还会更改它们在 Y 轴上的位置。
知道为什么我的"路径"元素重新定位吗?
我的"路径"形状如下所示:
joint.shapes.basic.CustomShape = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><path/></g><text><tspan class="word1"></tspan> <tspan class="word2"></tspan></text></g>',
defaults: joint.util.deepSupplement({
type: 'my.CustomShape',
attrs: {
path : {d: 'M 0 20 L 17 50 0 80 100 80 100 20 z', fill: '#ffffd9', stroke: '#4d4d4d', width: 100, height: 60, 'stroke-width':'0.03em'},
text: { ref: 'path' , 'line-height': 24 },
'.word1': { 'font-size': 12, fill: '#58ab00', 'font-weight': 'bold', 'font-family': 'Arial, helvetica, sans-serif', 'x':'4em' , 'y' : '5em'},
'.word2': { 'font-size': 11, fill: '#000000', 'font-family': 'Arial, helvetica, sans-serif', 'x':'37', 'y' : '7.5em'}
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
我设法一次调整所有元素的大小,如下所示:
_.each(paper.model.getElements(), function(el) {
el.set({ size: { width: 170 , height: newHeight} })
})
在我的元素中,有像"Rect"这样的元素和我用"path"创建的一些形状。当我设置新大小时,使用"path"创建的元素不仅会调整大小,还会更改它们在 Y 轴上的位置。
知道为什么我的"路径"元素重新定位吗?
我的"路径"形状如下所示:
joint.shapes.basic.CustomShape = joint.shapes.basic.Generic.extend({
markup: '<g class="rotatable"><g class="scalable"><path/></g><text><tspan class="word1"></tspan> <tspan class="word2"></tspan></text></g>',
defaults: joint.util.deepSupplement({
type: 'my.CustomShape',
attrs: {
path : {d: 'M 0 20 L 17 50 0 80 100 80 100 20 z', fill: '#ffffd9', stroke: '#4d4d4d', width: 100, height: 60, 'stroke-width':'0.03em'},
text: { ref: 'path' , 'line-height': 24 },
'.word1': { 'font-size': 12, fill: '#58ab00', 'font-weight': 'bold', 'font-family': 'Arial, helvetica, sans-serif', 'x':'4em' , 'y' : '5em'},
'.word2': { 'font-size': 11, fill: '#000000', 'font-family': 'Arial, helvetica, sans-serif', 'x':'37', 'y' : '7.5em'}
}
}, joint.shapes.basic.Generic.prototype.defaults)
});
谢谢!
相关文章:
- 使用jquery在单击时在单元格中输入值
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 可以'我不明白为什么;t将行和单元格添加到表中
- 如何在Angular中的表的所有单元格中添加链接
- 表中单元格的总和
- ExtJS网格单元格编辑器,防止焦点松动问题
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- 区分电子表格中的空单元格和0值
- ui网格将单元格显示为选择标记
- 单元格的工具提示或标题不显示超过2000个字符
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 允许表单元格内容水平展开
- 如何将jQuery/AAJAX结果放入表格单元格
- 使用jQuery只返回选中复选框后的第一个表单元格值
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 需要将单元格值复制到html表中的其他单元格中
- 从Javascript中选定的行中获取特定单元格的值
- 如何在 D3.grid 示例中向单元格添加文本 D3-js-building-a-grid-of-矩形
- 咏叹调网格单元格标签在 SVG 矩形内始终为空白
- 在 jointjs 图中一次调整所有单元格(矩形)的大小