我基本上想在我試用的RAPPID環境中更改JointJS形狀的顏色。更改JointJS Rappid對象的顏色（通過修改左導航菜單中的不同實例並通過Rappid Inspector顏色選擇器進行修改）？
這裏是我到目前爲止，我想達到什麼樣的一些背景： 我有一個JointJS形狀稱爲CHRISTMASTREE擴展joint.dia.Element。 建立這個ChristmasTree對象的svg字符串基本上是樹（svg路徑元素）的路徑，並且它上面有多個裝飾物（4個svg圈/橢圓有id和類，我假設我可以用來修改顏色） 。
我通過svg字符串中的樣式attr設置了一些裝飾物的初始值。 一旦我把它放在左邊的RAPPID菜單中，用戶可以拖動那個帶有紅球的聖誕樹，耶。 問題### 1： 但我想在左側菜單中放置第二個ChristmasTree形狀而不創建另一個有綠球的主對象......我將如何實現這一目標？ 在我的下面的代碼中，christmas_tree_style_2應覆蓋.ornament類與 「填充」：「＃00ff00」，但沒有（在左側菜單中，它仍然是紅色的）？ 其實，christmas_tree_style_1，我也試圖用藍色球'填充'：「＃0000ff」，但它仍然紅。 如何實現形狀的左導航覆蓋？
問題### 2： 假裝你幫我解決了以前的問題。您可以將2個多色ChristmasTree從左菜單導航拖放到主RAPPID內容區域。 我想現在通過檢查員動態地改變顏色。 我添加了一個顏色檢查器，顯示在每個元素的RAPPID右鍵菜單中： 'ornament_fill'：{label：'聖誕樹裝飾的填充顏色'，類型：'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);
}
}
注：此爲的jsfiddle非RAPPID JointJS是最好的，我迄今所看到的（但我仍然認爲不足以幫助我，因爲我試着通過JointJS的Rappid做框架）：HTTP：//的jsfiddle .net/kumilingus/67ajr67r/ – armyofda12mnkeys
另一種猜測：在createInspector中添加某種類似的事件（但這似乎沒有引用它應該引用的頁面上的當前實例...我如何獲取）：inspector.on（'change：ornament_fill'，function（cell，change，opt）{alert（'changed？'）;當前實例與此檢查器相關，然後將顏色應用於所有svg.ornament類型？ }）; – armyofda12mnkeys