我基本上想在我正在试用的 RAPID 环境中更改 JointJS 形状的颜色。
以下是关于我目前所拥有的以及我想要实现的一些背景： 我有一个名为 ChristmasTree 的 JointJS 形状，它扩展了joint.dia.Element。基本上，构建此 ChristmasTree 对象的 svg 字符串是树的路径（svg 路径元素），以及上面的多个装饰物（4 个 svg 圆圈/椭圆，它们具有我认为可以用来修改颜色的 id 和类）。
我通过 svg 字符串中的样式 attr 为装饰品设置了一些初始值。一旦我把它放在左边的 RAPPID 菜单中，用户就可以拖动那棵上面有红球的圣诞树，耶。 问题###1： 但我想在左侧菜单中放置第二个圣诞树形状而不创建另一个具有绿球的主要对象......我将如何实现这一点？在我下面的代码中，christmas_tree_style_2应该用 'fill': "#00ff00"覆盖 .ornament 类，但不是（在左侧菜单中，它仍然是红色的）？事实上，christmas_tree_style_1，我也尝试用蓝色球'fill': "#0000ff"覆盖，但它仍然是红色的。如何实现形状的左导航覆盖？
问题###2： 假装你帮我解决了以前的问题。您可以将 2 个多色圣诞树从左侧菜单导航拖放到主 RAPPID 内容区域。我现在想通过检查器动态更改颜色。我为每个元素添加了一个颜色检查器，它显示在 RAPPID 右导航菜单中：'ornament_fill': { label: 'Color of Christmas-tree-ornament's fill', type: 'color', group: 'generalinfo', index: 2 } 但不知道如何创建一个事件来动态改变饰品的颜色。任何想法？谢谢！
这是下面代码的重要部分。
这也是一个实际的工作示例（但左导航初始覆盖和右导航检查器颜色覆盖不起作用，因此我的 2 个问题）： http ://armyofda12mnkeys.kissr.com/rappid_christmastree/index.html （对不起，我找不到 rappid.js 的 CDN 添加到 JSFiddle，因此更容易将文件夹上传到站点）。我的问题适用的文件是 app.js 和 rappid-custom-shapes.js。
#//svg for Christmas Tree + its ornaments... will be added to ChristmasTree shape/obj below
var ChristmasTreeSVGstr = "<g class="rotatable"><g class="scalable">
...
<path id="christmastreestrokeid" class="christmastreestroke" ... />
<circle id="ornament1" class="ornament" r="24" cy="350" cx="120"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament2" class="ornament" rx="30" ry="25" cy="83" cx="231"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament3" class="ornament" rx="28" ry="38" cy="343" cx="331"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
<ellipse id="ornament4" class="ornament" rx="63" ry="54" cy="238" cx="230"
style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";
//default Christmas Tree
joint.shapes.basic.ChristmasTree = joint.dia.Element.extend({
markup: ChristmasTreeSVGstr,
defaults: joint.util.deepSupplement({
type: "basic",
name: 'Initial Christmas Tree label text',
size: {
width: 20,
height: 20
},
attrs: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
width: 10,
height: 15
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
}, joint.dia.Element.prototype.defaults)
});
//RAPPID left menu christmas trees (2 variations of the initial ChristmasTree object, so I need to override some of the colors)
var christmas_tree_style_1 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'green',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#0000ff",
'fill-opacity': 1
},
"#ornament3": {
'fill': "#0000FF",
'stroke': "green",
'stroke-width': '5px',
'fill-opacity': .5
}
}
});
var christmas_tree_style_2 = new joint.shapes.basic.ChristmasTree({
position: { x: 0, y: 0 },
size: {
width: 40,
height: 50
},
attr: {
".christmastreestroke": {
stroke: 'blue',
'stroke-width': '100px',
'fill-opacity': 1,
},
".ornament": {
'fill': "#00ff00",
'fill-opacity': 1
},
"#ornament3": {
'fill': "yellow",
'stroke': "yellow",
'stroke-width': '5px',
'fill-opacity': 1
}
}
});
//add to left menu
stencil.load([christmas_tree_style_1, christmas_tree_style_2], 'customchristmastrees');
//add it to the inspector
function createInspector(cellView) {
if (!inspector || inspector.options.cellView !== cellView) {
if (inspector) {
// Set unsaved changes to the model and clean up the old inspector if there was one.
inspector.updateCell();
inspector.remove();
}
//if(cellView.$el.hasClass('class')) // certain element should get certain things more in inspector?
//how to determine different shapes?
inspector = new joint.ui.Inspector({
inputs: {
'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },
'ornament_fill': { label: 'Color of christmas-tree-ornaments fill', type: 'color', group: 'generalinfo', index: 2 },
},
groups: {
generalinfo: { label: 'General Info', index: 1 },
},
cellView: cellView
});
$('.inspector-container').html(inspector.render().el);
}
}
