JointJS模型-文本属性没有被分配
JointJS Models - Text attr is not assigned
我正在创建一个简单的joint.shapes.dev .Model并分配一个文本属性,但是文本没有出现,它被标记为"Model"。
function makeEditableElement(label) {
var maxLineLength = _.max(label.split(''n'), function(l) { return l.length; }).length;
// Compute width/height of the rectangle based on the number
// of lines in the label and the letter size. 0.6 * letterSize is
// an approximation of the monospace font letter width.
var letterSize = 15;
var width = 2 * (letterSize * (0.3 * maxLineLength + 1));
var height = 2 * ((label.split(''n').length + 1) * letterSize);
return new joint.shapes.devs.Model({
'.label': label,
size: { width: width, height: height },
inPorts: [''],
outPorts: [''],
attrs: { '.inPorts circle': { r: 3 ,fill: 'gray', type: 'input',magnet: 'passive'},
'.outPorts circle': { r: 3 ,fill: 'gray', type: 'output',magnet:'true' },
rect: { width: width, height: height, fill: '#FFF' ,rx: 5,ry: 5, 'stroke-width':1.5, 'stroke': '#555' },
text: { text: label, fill: '#555' , 'font-size': 13, magnet: true,'font-weight': 'normal'}
}
});
}
graph.addCell(makeEditableElement("foo"));
joint.layout.DirectedGraph.layout(graph, { setLinkVertices: false });
请指出,如果我错过了什么,因为我是新的JointJS。
我通过改变'的位置让它工作。
:function makeEditableElement(label,x,y) {
var maxLineLength = _.max(label.split(''n'), function(l) { return l.length; }).length;
// Compute width/height of the rectangle based on the number
// of lines in the label and the letter size. 0.6 * letterSize is
// an approximation of the monospace font letter width.
var letterSize = 15;
var width = 2 * (letterSize * (0.3 * maxLineLength + 1));
var height = 2 * ((label.split(''n').length + 1) * letterSize);
return new joint.shapes.devs.Model({
id: label,
position: {x:x, y:y},
size: { width: width, height: height, fill: 'transparent' ,rx: 5,ry: 5, 'stroke-width':1.5, 'stroke': '#31d0c6' },
inPorts: [''],
outPorts: [''],
attrs: { '.label': {text: label},
'.inPorts circle': { r: 3 ,fill: 'gray', type: 'input',magnet: 'passive'},
'.outPorts circle': { r: 3 ,fill: 'gray', type: 'output',magnet:'true' },
rect: { width: width, height: height, fill: 'transparent' ,rx: 5,ry: 5, 'stroke-width':1.5, 'stroke': '#31d0c6' },
text: { text: label, magnet: true, 'font-size': letterSize, 'font-family': 'monospace' }
}
});
}
'.label'
需要分配一个包含text属性的对象—您只分配字符串"foo"
试试下面的命令:
...
'.label': { text: label },
...
相关文章:
- 是否可以使用CSS分配数据属性
- Javascript从函数分配属性
- 比较元素值并将属性分配给较大的
- 为什么 Jasmine 在我设置 selectedIndex 时抱怨“试图分配给只读属性”
- 将文本值匹配/分配给属性
- 使用 JQuery 从另一个元素的 id 为图像分配属性
- 为什么typeof(null)返回“;对象”;,但是你可以't为其分配属性
- 如何在对象构造期间使用异步生成的值分配属性
- 分配属性值在猫鼬中不起作用
- 在不为原型分配属性的情况下扩展Javascript对象
- 为元素分配属性的自定义指令
- 如何在React中动态分配属性
- 在javascript中分配属性引用
- 动态地为对象分配属性名
- 正在分配属性'由getElementById()在语句中返回的HTML元素对象的s
- Javascript逻辑运算符&&用于分配属性
- 按索引分配属性的最佳方法是什么?
- 在Internet Explorer中动态地为输入字段分配属性
- 如何创建带有未分配属性的Javascript构造函数/原型
- 无法在 Internet Explorer 中为 window.event(或数据属性)分配属性