FabricJSのフラッシュアイコン

Question

FabricJSを使用してこのアイコンをどのくらい正確に作成できますか？

私はthisページにパスとパスグループを使用してみましたが、私はパラメータがnew.fabric.Path('..')でどのように機能するかを理解していません。

を使用するfabric.Imageは、SVGとしてキャンバスを書き出し、イメージファイルのデータがSVGファイルにコピーされないため、使用できません。

Answer 1

あなたはfabric.Pathクラスを使用して、フラッシュのアイコンを作成するには、次のSVGパスデータを使用することができます...

M795 2528 c-3 -18 -46 -301 -95 -628 -49 -327 -92 -610 -95 -627 l-6 
-33 180 -2 179 -3 -214 -604 c-118 -332 -212 -606 -210 -608 2 -2 341 360 753 
804 l749 808 -277 5 -277 5 157 400 c86 220 166 426 178 458 l22 57 -519 0 
-519 0 -6 -32z 

は基本的には、new.fabric.Path('..')は、パラメータとして絶対SVGパスデータを取ります。

ᴅᴇᴍᴏ

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

 
var path = new fabric.Path('M795 2528 c-3 -18 -46 -301 -95 -628 -49 -327 -92 -610 -95 -627 l-6 -33 180 -2 179 -3 -214 -604 c-118 -332 -212 -606 -210 -608 2 -2 341 360 753 804 l749 808 -277 5 -277 5 157 400 c86 220 166 426 178 458 l22 57 -519 0 -519 0 -6 -32z'); 
 

 
path.set({ 
 
    left: 100, 
 
    top: 100, 
 
    flipY: true, 
 
    originX: 'center', 
 
    originY: 'center' 
 
}); 
 
path.scaleToWidth(100); 
 
path.scaleToHeight(100); 
 

 
canvas.add(path); 
 
canvas.renderAll();

canvas{border: 1px solid #ccc}

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