我基本上想在他的RAPPID环境中改变JointJS形状的颜色。
以下是我到目前为止以及我想要实现的目标的背景知识: 我有一个名为ChristmasTree的JointJS形状,它扩展了joint.dia.Element。 基本上,构建这个ChristmasTree对象的svg字符串是树的路径(svg路径元素),上面有多个饰品(4个svg圆圈/椭圆形,有id' s和类,我认为我可以用它来修改颜色)。
我通过svg字符串中的样式attr为饰品设置了一些初始值。 一旦我将它放在左边的RAPPID菜单中,用户就可以拖动那个带有红球的圣诞树了。 问题### 1: 但我想在左侧菜单中放置第二个ChristmasTree形状,而不创建另一个有绿球的主要对象......我将如何实现这一目标? 在我的下面的代码中, christmas_tree_style_2 应该覆盖.ornament类 '填充':"#00ff00" ,但是没有(在左侧菜单中,它仍然是红色的)? 事实上, christmas_tree_style_1 ,我也试图用蓝色球覆盖'填充':#3400ff" ,但它仍然红色。 如何实现形状的左导航覆盖?
问题### 2: 假装你帮我解决以前的问题。您可以将左侧菜单导航中的2个多色ChristmasTree拖放到主RAPPID内容区域。 我现在想通过检查员动态更改颜色。 我添加了一个颜色检查器,它显示在每个元素的RAPPID右导航菜单中: ' ornament_fill':{label:'圣诞树装饰的颜色',键入:' color',group:' generalinfo& #39;,索引:2} 但不确定如何创建一个动态来动态更改饰品的颜色。任何的想法?谢谢!
以下是以下代码的重要部分。
这里也是一个实际的工作示例(但左导航初始覆盖和右导航督察颜色覆盖不起作用,因此我的2个问题): http://armyofda12mnkeys.kissr.com/rappid_christmastree/index.html (抱歉,我无法找到一个CDN for rappid.js添加到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);
}
}
答案 0 :(得分:1)
问题1:如果要通过元素上的style
属性更改它们,则需要从标记中删除attr
属性。我从标记中删除了fill
,stroke
,stroke-width
:
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-rule:evenodd;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-rule:evenodd;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-rule:evenodd;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-rule:evenodd;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1">...</circle>
</g></g>";
然后您可以按如下方式自定义形状:
var rb = new joint.shapes.basic.ChristmasTree({
position: { x: 50, y: 50 },
size: { width: 100, height: 150 },
attrs: {
".ornament": {
'fill-opacity': 1,
stroke: 'pink',
'stroke-width': 5,
fill: 'blue'
}
}
});
问题#2:
如果您解决了问题#1,您可以直接将值与attrs
同步:
inspector = new joint.ui.Inspector({
inputs: {
'name': { label: 'Name of Christmas Tree', type: 'text', group: 'generalinfo', index: 1 },
attrs: {
'.ornament': {
fill: {
label: 'Color of christmas-tree-ornaments fill',
type: 'color',
group: 'generalinfo',
index: 2
}
}
},
},
groups: {
generalinfo: { label: 'General Info', index: 1 },
},
cellView: cellView
});