javascript - Raphael/Joint.js で複数のフィルムを円に入れる

Question

私は joint.js に FSA を持っています。状態 (円) を円の下から 1/2 や 1/6 のような特定の比率で半塗りつぶす必要があります。トリッキーな部分は、2 回行う必要があることです。つまり、大きなセミフィルとその上に小さなセミフィルを行います。

これは私がやろうとしていることです:

これを達成する方法がわかりません。

Answer 1

トリックは、3 つの 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);