KeepDraw.js-キャンバスにペイントするためのJavaScriptフレームワーク

みなさんこんにちは。 この記事では、キャンバス描画ライブラリ-KeepDrawに焦点を当てます。

これは、イベントとアニメーションをサポートするCanvas 2dを操作するためのフレームワークです。

特徴的な機能：

1. OOPスタイルAPI
2. マウス、キーボード、タッチスクリーンのイベント。
3. アニメーションのサポート。
4. 点によるベジェ曲線の描画。
5. 図と点の交差をチェックする多くの機能。
6. 図形をグラデーションと画像で塗りつぶします。
7. オブジェクトテンプレート-線、長方形、テキスト、多角形、円。
8. モバイルデバイスのサポート。
9. ベジェ曲線を使用して形状を滑らかにします。
10. 軽量。 圧縮バージョンの重量は15キロバイトです。

はじめに

キャンバス上の主なオブジェクトはステージです。 キャンバスの幅、div div識別子（キャンバス）、高さと背景を示します。 Stage.childsには、キャンバスに表示されるすべての図形が含まれます。 キャンバスごとに1つのStageオブジェクトを指定できます。 ステージとシェイプを指定すると、アニメーションまたはイベントを開始できます。

コード例：

//  var stage = new KeepDraw.Stage({ width: innerWidth, height: innerHeight, canvas: 'canvas', fill: '#00afff' }); //  var circle = new KeepDraw.Circle({ x: innerWidth / 2, y: innerHeight / 2, radius: innerHeight / 3, color: 'white', stage: stage });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

メインフィギュア

KeepDrawには、長方形（Rect）、正多角形（Polygon）、テキスト（Text）、Lineまたは独自のFigure（Line）があります。

独自の図の例：

 var stage = new KeepDraw.Stage({ width: innerWidth, height: innerHeight, canvas: 'canvas', fill: '#00afff' }); var line = new KeepDraw.Line({ x: 100, y: 50, segments: [[0,0,-70,0,-70,100],[0,100,70,100,130,10],[200,10,270,10,270,108.94],[200,100,130,100,70,0.3],[0,0,-70,0]], color: 'white', strokeWidth: 5, strokeColor: '#30ccff', stage: stage });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

スタイル

次の値は、すべての形状に適用できます。

• color-塗りつぶし（色、グラデーション、または画像）;
• strokeColor-ストロークの色。
• strokeWidth-ストローク幅。
• shadowColor-影の色。
• shadowWidth-影の幅。
• lineCap-線セグメントのストローク（通常-お尻、長方形-正方形、楕円形-円形。
• lineJoin-線の端のストローク（通常-光沢、長方形-面取り、楕円-円形;
• shadowOffsetX-シャドウをx軸に沿ってシフトします。
• shadowOffsetY-影をy軸に沿ってシフトします。
• font-テキストフォント（サイズとフォント）;
• 不透明度-不透明度（0-1）;

コード例：

 var stage = new KeepDraw.Stage({ width: innerWidth, height: innerHeight, canvas: 'canvas', fill: '#00afff' }); var circle = new KeepDraw.Circle({ x: innerWidth / 2, y: innerHeight / 2, radius: innerHeight / 6, color: 'rgba(255, 255, 255, 0.5)', strokeColor: 'white', shadowWidth: 100, strokeWidth: 20, shadowColor: 'rgba(0,0,0,0.5)', stage: stage });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

追加機能

すべての図には独自の機能があります。

• toLine（）-任意の形状を線に変換します。
• smooth（strength 0-3）-ベジエを使用したスムージング。ラインにのみ適用可能。
• endPoints（）-極値の配列を返します：[上[x、y]、下[x、y]、左[x、y]、右[x、y]];
• clone（）-フィギュアのクローンを返します;
• star（）-線を星のように見せます。
• floor（）-figureオブジェクトのすべての値を四捨五入します。
• setAttrs（オブジェクト）-オブジェクトの値を図に設定します。
• 単純化（周期性）-線分を均等に削除します。
• Reflect（幅、高さ）、trueまたはfalse-行を反映します。
• inScreen（）-図が画面に表示されるかどうかを決定します。
• inDistance（minX、minY、maxX、maxY）-フィギュアが特定の距離にあるかどうかを決定します;
• 回転（度、[x、y]）-軸または点を中心に線を回転します。

イベント

イベントは図形に署名できます（クリック、マウスダウン、タッチスタートなど）。



→ 例



アニメーション。 アニメーションはいくつかの方法で設定できます。

  Stage.Animation: stage.draw = function(diff) { if (poly.x > innerWidth * 0.88) vel = -1; if (poly.x < innerWidth * 0.12) vel = 1; poly.rotate(vel * diff); poly.x += innerHeight / 150 * vel; }; var anim = new KeepDraw.Animation(stage);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

→ デモ



またはTweenを介して：

 var tween = new KeepDraw.Tween(poly, { age: 40, end: 5000, attrs: { x: innerWidth, opacity: 0 } }); tween.play(); var anim = new KeepDraw.Animation(stage);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

→ デモ

おわりに

→KeepDrawに基づくオンライン描画エディタ-roundraw.github.io ;

→ Github

→ホームページ-keepdraw.github.io