1

私のコードは

canvas.clipTo = function (ctx) {

    ctx.beginPath();
    for (var i = 0; i < totalPrintArea; i++) {
        ctx.save();
        ctx.fillStyle = 'rgba(51,51,51,0)';
        ctx.rect(clipLft[i], clipTp[i], clipW[i], clipH[i], 'rgba(51,51,51,1)', clipRtn[i]);
        ctx.stroke();
        ctx.restore();
    }

    ctx.closePath();
    ctx.clip();
    canvas.calcOffset();
};
canvas.renderAll();

赤い点線のボックスから値を取得し、複数のマスクが生成されているクリップに適用します。

私の問題は、すべてのプロパティを取得することですが、すべての回転を取得することではありません。

すべての長方形を回転させたい。

クリップの回転を変更するコードを取得しましたctx.rotate(50);が、すべてを独自の値で回転させたいので機能しません

同じように私を導いてください。

説明なし

4

2 に答える 2

0

元の fabricJS github プロジェクトで、コメントを見ました: https://github.com/kangax/fabric.js/issues/932#issuecomment-27223912

そして、常に ctx.beginPath を作成しないようにする必要があると判断しました。

canvas.clipTo = function(ctx) { 
var skip = false;
// Workaround to make possible 
// making clipTo with 
// fabric.Group 
var oldBeginPath = ctx.beginPath;
ctx.beginPath = function() {
if (!skip) {
  oldBeginPath.apply(this, arguments);
  skip = true;
  setTimeout(function() {
    skip = false;
  }, 0);
}
}
group.render(ctx)
};

説明されている問題に対する私の回避策を見ることができます: https://jsfiddle.net/freelast/6o0o07p7/

回避策は完璧ではありませんが、誰かの役に立てば幸いです。

于 2016-07-04T15:18:58.380 に答える
0

Andrey's answerを使用してみましたが、興味深い点がいくつかありましたが、うまくいきませんでした。

キャンバスを単一のオブジェクト (円や長方形など) にクリップしようとする場合は、次のように簡単に実行できます。

canvas.clipTo = function(ctx) {
    shape.render(ctx); //shape is a circle, for instance
}

ただし、前述の GitHub のコメントで Kienz と butch2k が説明したように、問題は、このソリューションをグループで使用できないことです。特に、次のスニペットを使用する場合:

canvas.clipTo = function(ctx) {
    group.render(ctx);
}

クリッピングに使用されるグループの 1 つのオブジェクトのみが表示されます。

この問題は、グループ内の各オブジェクトに対してandrenderを呼び出すメソッドが原因です。また、最後のいくつかの beginPath-closePath 呼び出しのみがクリッピングに影響するため、何らかの回避策が必要です。ctx.beginPath()ctx.closePath()

したがって、私の解決策では、ctx.closePathandメソッドを ( andctx.beginPathという名前の他の 2 つの一時変数に格納した後)一時的に再定義し、何もしないようにしました。次に、最初に を呼び出し、グループ内のすべてのオブジェクトをレンダリングした後、 を呼び出します。oldBeginPatholdClosePatholdBeginPatholdClosePath

そして今、ここに（作業中の）スニペットがあります：

canvas.clipTo = function(ctx) {
    var oldBeginPath = ctx.beginPath;
    var oldClosePath = ctx.closePath;

    ctx.beginPath = function() {}
    ctx.closePath = function() {}

    oldBeginPath.apply(ctx);
    group.forEachObject(function(shape){
        shape.render(ctx);
    });
    oldClosePath.apply(ctx);

    ctx.beginPath = oldBeginPath;
    ctx.closePath = oldClosePath;
};

これが将来誰かの暇な時間を節約することを願っています。

于 2016-08-28T18:20:47.960 に答える