ファブリックオブジェクトのスキュー値をリセットする

Question

私は、スケーリングされ歪んだファブリック楕円オブジェクトを持っています。スケーリングやスキューなしで同じ楕円を再現したい私は、スケーリングとスキューの値をオフセットすることによって、rx、ry、angleの新しい値を計算することでこれを達成できると仮定します。私はスケーリング値を相殺することができましたが、私はスキュー値を相殺するための計算を理解することができません。

ご協力いただきありがとうございます。

Jsfiddle - https://jsfiddle.net/jwp2yysh/

サンプルコードを参照してください。私は、青い楕円を赤い楕円に沿って並べるようにします。

var canvas = new fabric.Canvas('c'); 
 

 
var redEllipse = new fabric.Ellipse({ 
 
    rx: 80, 
 
    ry: 50, 
 
    originX: 'center', 
 
    originY: 'center', 
 
    fill: '', 
 
    stroke: 'red', 
 
    strokeWidth: 1, 
 
    top: 180, 
 
    left: 240, 
 
    angle: 30, 
 
    scaleX: 1.23, 
 
    scaleY: 1.4, 
 
    skewX: 25, 
 
    skewY: 0 
 
}); 
 

 
canvas.add(redEllipse); 
 

 
var blueEllipse = new fabric.Ellipse({ 
 
    rx: redEllipse.rx * redEllipse.scaleX, 
 
    ry: redEllipse.ry * redEllipse.scaleY, 
 
    originX: 'center', 
 
    originY: 'center', 
 
    fill: '', 
 
    stroke: 'blue', 
 
    strokeWidth: 1, 
 
    top: redEllipse.top, 
 
    left: redEllipse.left, 
 
    angle: redEllipse.angle * redEllipse.scaleY/redEllipse.scaleX, 
 
    scaleX: 1, 
 
    scaleY: 1, 
 
    skewX: 0, 
 
    skewY: 0 
 
}); 
 

 
canvas.add(blueEllipse);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script> 
 
<canvas id="c" width="500" height="500"></canvas>

Answer 1

私はあなたがこのJSFiddleような何かを探していると仮定します。私が理解できるものから

var canvas = new fabric.Canvas('c'); 
 

 
var redEllipse = new fabric.Ellipse({ 
 
    rx: 80, 
 
    ry: 50, 
 
    originX: 'center', 
 
    originY: 'center', 
 
    fill: '', 
 
    stroke: 'red', 
 
    strokeWidth: 1, 
 
    top: 180, 
 
    left: 240, 
 
    angle: 30, 
 
    scaleX: 1.23, 
 
    scaleY: 1.4, 
 
    skewX: 0, 
 
    skewY: 0 
 
}); 
 

 
canvas.add(redEllipse); 
 

 
var blueEllipse = new fabric.Ellipse({ 
 
    rx: redEllipse.rx * redEllipse.scaleX - 10, 
 
    ry: redEllipse.ry * redEllipse.scaleY - 10, 
 
    // rx:80*1.23, 
 
    //ry:50*1.4, 
 
    originX: 'center', 
 
    originY: 'center', 
 
    fill: '', 
 
    stroke: 'blue', 
 
    strokeWidth: 1, 
 
    top: redEllipse.top, 
 
    left: redEllipse.left, 
 
    angle: redEllipse.angle, 
 
    //angle:30, 
 
    scaleX: 1, 
 
    scaleY: 1, 
 
    skewX: 0, 
 
    skewY: 0 
 
}); 
 

 
canvas.add(blueEllipse);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.min.js"></script> 
 
<canvas id="c" width="500" height="500"></canvas>

、rxとryのあなたの計算が正しいです。コードで述べた数式を使ってangleを計算する際の問題は、おそらく元の楕円の歪みを考慮していないことになります。

より簡単な方法は、新しい楕円をインラインにするために、角度redEllipse.angleを複製することです。

rxとryの値をいくつかの一般的な要因（私は10を使用しています）で減らす必要があります。