3

Kinetic.Wedge を使用してウェッジを描画できることは知っています。

  var compassArc = new Kinetic.Wedge({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    angleDeg: 60,
    fill: 'red',
    stroke: 'black',
    strokeWidth: 4,
    rotationDeg: -90
  });

これで全体に黒い輪郭の「ピザのスライス」が描かれます。円の中心に戻る直線がない、ピザの「クラスト」が欲しいだけです。これどうやってするの？

塗りつぶしを に設定するとnull、赤は削除されますが、輪郭は残ります。

4

3 に答える 3

5

円弧を使用して、これにカスタム形状を作成するのはどうですか?

http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

パスを閉じたり、ストロークを塗りつぶしたりしないように注意してください。もしそうなら、あなたはあなたが望むものを手に入れるでしょう。これは KineticJS オブジェクトなので、必要に応じてドラッグできます。

これが実際の例です。

http://jsfiddle.net/bighostkim/WzxxH/

var arc = new Kinetic.Shape({
    drawFunc: function(canvas) {
        var context = canvas.getContext();
        var x = stage.getWidth() / 2;
        var y = stage.getHeight()/2;
        var radius = 70;
        var startAngle = 1 * Math.PI;
        var endAngle = 0 * Math.PI;
        var context = canvas.getContext('2d');
        context.beginPath();
        context.arc(x, y, radius, startAngle, endAngle, false);
        //context.closePath();
        canvas.stroke(this);
    },
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4,
    draggable:true
});
于 2013-02-06T01:46:12.127 に答える
1

allenhwkim の回答は少し時代遅れで、いくつかの問題があります。たとえば、キネティック ダッシュ アレイは機能しません。したがって、ここに改訂版があります：

var arc = new Kinetic.Shape({
        x: 100,
        y: 100,
        stroke: '#000',
        strokeWidth: 4,
        dash: [8, 4],
        drawFunc: function(context) {
            var radius = 50;
            var startAngle = 1 * Math.PI;
            var endAngle = 0 * Math.PI;
            context.beginPath();
            context.arc(0, 0, radius, startAngle, endAngle, false);
            context.fillStrokeShape(this);
        },
        draggable:true      
    });
于 2014-09-03T19:51:47.483 に答える
0

使用できるKinetic.Arcクラスがあります。outerRadius を innerRadius に等しくすると、必要なものが得られます。

this.arc = new Kinetic.Arc({
  innerRadius: 90,
  outerRadius: 90,
  stroke: 'red',
  strokeWidth: 2,
  angle: 60,
  rotationDeg: 210
});
于 2015-02-25T08:27:18.710 に答える