[英]Using a constructor to help populate Raphael & joint.js functionality
[英]Putting multiple films in a circle in Raphael/Joint.js
我在joint.js中有一個FSA,我需要將狀態(圓圈)半填充到特定的比例,如1/2或1/6,從圓的底部開始。 棘手的部分是它需要完成兩次 - 更大的半填充和更小的半填充。
這就是我想要做的:
我迷失了如何實現這一目標。
訣竅是創建三個SVG圓並為它們定義剪輯路徑。 下面的示例使用自定義SVG標記創建自定義JointJS形狀(繼承自fsa.State),該標記啟用您在圖像中顯示的着色:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 400, model: graph });
joint.shapes.fsa.MyState = joint.shapes.fsa.State.extend({
markup: [
'<g class="rotatable"><g class="scalable">',
'<clipPath id="clip-top1"><rect x="-30" y="0" width="60" height="30"/></clipPath>',
'<clipPath id="clip-top2"><rect x="-30" y="15" width="60" height="30"/></clipPath>',
'<circle class="a"/><circle class="b"/><circle class="c"/>',
'</g><text/></g>'
].join(''),
defaults: joint.util.deepSupplement({
type: 'fsa.MyState',
size: { width: 60, height: 60 },
attrs: {
'circle': { fill: 'white' },
'.b': { fill: 'red', 'clip-path': 'url(#clip-top1)' },
'.c': { fill: 'blue', 'clip-path': 'url(#clip-top2)' }
}
}, joint.shapes.fsa.State.prototype.defaults)
});
var mystate1 = new joint.shapes.fsa.MyState({
position: { x: 50, y: 50 },
size: { width: 100, height: 100 },
attrs: { text: { text: 'my state 1' } }
});
graph.addCell(mystate1);
var mystate2 = new joint.shapes.fsa.MyState({
position: { x: 50, y: 160 },
size: { width: 50, height: 50 }
});
graph.addCell(mystate2);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.