rappid/jointjs -如何更改rect.clone()上的属性
rappid/jointjs -如何更改rect.clone()上的属性
提问于 2017-12-15 20:24:58
我是Rappid和Jointjs的新手，我正在为语法/上下文而苦苦挣扎。对于我的第一个实验，我只是想在计数器上循环，并创建一些矩形。在每个新的矩形上，我想要更改文本，但无论我如何尝试，似乎都不能让它更改文本。我的代码如下--谢谢你的帮助。
My Rectangle test
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/lodash/index.js"></script>
<script src="../node_modules/backbone/backbone.js"></script>
<script src="../node_modules/graphlib/dist/graphlib.core.js"></script>
<script src="../node_modules/dagre/dist/dagre.core.js"></script>
<script src="../build/rappid.min.js"></script>
<!-- <script src="joint.js"></script>-->
</head>
<body>
<div id="myholder"></div>
<div id="myholder-small"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 800,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 10, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' },
text: { text: 'my box', fill: 'white' }
}
});
for (i = 0; i < 5; i++) {
var rect2 = rect.clone();
rect2.translate(10, (50 * i) );
rect2.attrs = { rect: {fill:'red'},
text: { text: 'Node ' + i } };
graph.addCells([rect2]);
};
</script>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2018-01-11 02:24:18
您应该通过element.attr()方法更改属性。
My Rectangle test
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="joint.css" />
<script src="../node_modules/jquery/dist/jquery.js"></script>
<script src="../node_modules/lodash/index.js"></script>
<script src="../node_modules/backbone/backbone.js"></script>
<script src="../node_modules/graphlib/dist/graphlib.core.js"></script>
<script src="../node_modules/dagre/dist/dagre.core.js"></script>
<script src="../build/rappid.min.js"></script>
<!-- <script src="joint.js"></script>-->
</head>
<body>
<div id="myholder"></div>
<div id="myholder-small"></div>
<script type="text/javascript">
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#myholder'),
width: 600,
height: 800,
model: graph,
gridSize: 1
});
var rect = new joint.shapes.basic.Rect({
position: { x: 10, y: 30 },
size: { width: 100, height: 30 },
attrs: { rect: { fill: 'blue' },
text: { text: 'my box', fill: 'white' }
}
});
for (i = 0; i < 5; i++) {
var rect2 = rect.clone();
rect2.translate(10, (50 * i) );
rect2.attr({
rect: { fill:'red' },
text: { text: 'Node ' + i }
});
graph.addCells([rect2]);
};
</script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47832394
复制相关文章
相似问题
腾讯云开发者
