3

循環パスを使用してグループをクリップしたいのですが、グループの clipFunc が実行されていないようで、clipFunc プロパティの使用方法に関するドキュメントが少しむらがあります。

これが私の現在の試みのjsfiddleです。

関連するコードは次のとおりです。

var stage = new Kinetic.Stage({
  container: 'container',
  width: 500,
  height: 500
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
   clipFunc: function(canvas) {
      var context = canvas.getContext();
      context.beginPath();
      context.arc(250, 250, 50, 0, 2 * Math.PI, false);
      context.clip();
   }
});

var rect = new Kinetic.Rect({
   x: 150,
   y: 225,
   width: 200,
   height: 200,
   fill: 'blue',
   stroke: 'black',
   strokeWidth: 2
});

group.add(rect);
layer.add(group);
stage.add(layer);

現在、clipFunc 関数にブレークポイントを配置すると、ヒットすることはありません。

4

1 に答える 1

3

単なる長方形のクリッピング領域である clip を優先して、clipFunc のサポートが削除されました。円形のクリップをシミュレートしたい場合は、toImage() を使用してグループを画像に変換し、画像の塗りつぶしパターンで円を描くことができます。

エッジがアンチエイリアス処理されていないため、キャンバス クリップ機能が長方形以外のクリッピング領域でうまく再生されないため、clipFunc プロパティが削除されました (これは円形パスで特に顕著です)。

于 2013-08-27T07:09:49.507 に答える