CanvGauge-HTML5のキャンバスを使用したゲージ

HTML5 Canvas Gauge こんにちは、ハブロビテス!



今日は、自分のプロジェクトの1つで行った小さな開発を共有したいと思います。 実際、ネットワークには有料と無料の両方のゲージ実装が多数あります。 しかし、canvasを使用して少なくとも1つのソリューションを見つけることができなかったため、自分で作成することにしました。



なぜキャンバスなのか





まず、すべての最新のブラウザーで動作します。 第二に-制限なしにAndroidおよびiOSモバイルプラットフォームで動作します。 たとえば、同じSVGはAndroid 2.xではデフォルトでは機能せず、FlashはiOSでは機能しません。



CanvGaugeのコードはここから入手できますAPIの簡単説明があります 。 そして、ここで仕事の例を見る。



使用する場合、サードパーティのライブラリは必要ありません。 コードはMITライセンスの下で配布され、追加およびベストプラクティスを安全に選択、変更、改善/劣化、共有できます。 リポジトリへの良いコミットを喜んで受け入れます。 バグと興味深い提案に感謝します。 残念ながら、私はアーティストではないので、見た目は完璧ではないかもしれません。 誰かが「美」を手伝うことができたら-ようこそ!



すぐに使える機能





ゲージのカスタマイズは比較的簡単です。 デバイスの要素の色、サイズ、グラデーションスケール、タイトル、および単位をパラメーターで設定できます。 さまざまな矢印アニメーション機能が利用可能であり、アニメーション機能をその場で実装することもできます。



All Articles