Canvasでのパス描画と塗りつぶしの基本技術
Canvasを使用した2Dグラフィックス描画において、パスの定義や線のスタイル、塗りつぶし方法は非常に重要です。本記事では、パスの起点設定、線の描画・塗りつぶし、矩形の描画、非零正交ルールおよび奇偶ルールといった基本的な概念を解説し、実際の折れ線グラフや棒グラフの作成例も紹介します。
パスの基本操作と状態管理
Canvasの描画には、まず描画の開始点を指定 ...
9月10日 00:20 投稿
Vue.jsによるQRコードの動的生成とダウンロード機能の実装
フロントエンドでユーザーの個人名刺用QRコードを動的に生成し、ダウンロード機能を提供する要件がありました。様々な解決策を検討した結果、実装を完了させたので、その技術的なアプローチを記録します。
機能概要
QRコードの密度を調整可能
カスタムカラーでのQRコード生成
生成したQRコードのダウンロード機能
シンプルで理解しやすい実装構造
実装アプローチ
1. ...
9月8日 11:19 投稿
Vue 3で画像付きテーブルをExcelにエクスポートする方法
ExcelJSライブラリを使用すると、画像を含むテーブルデータをExcelファイルとして出力できます。以下では、画像がURLまたはBase64形式で提供される場合の実装例を紹介します。
必要なパッケージのインストール
npm install exceljs file-saver
URL形式の画像を1セル1枚で出力
この実装では、画像を並列でダウンロードし、必要に応じて圧縮してからExcelに埋め込みます。
...
9月7日 08:15 投稿
3ステップで実現する魅力的なWebパーティクルアニメーション：コード不要でCanvasエフェクトを自在に操る
Webサイトに目を引くパーティクルアニメーションを追加したいけれど、物理計算やコーディングの難しさに尻込みしていませんか？軽量なJavaScriptライブラリ「particles.js」を使えば、コアとなるコードを一切書かずにプロ級のアニメーション効果を実現できます。このガイドでは、初心者でも簡単に自分のパーティクルワールドを作成する方法を紹介します。
なぜあなたのサ ...
8月27日 21:54 投稿
Androidにおける画像処理：スケーリング・クロッピング・回転・保存の実装
Androidアプリケーションにおいて、リソース効率を高め、UIの一貫性を保つため、ランタイムで画像を動的に加工するニーズは非常に多い。代表的な操作には、解像度に応じたスケーリング、アスペクト比を維持したクロッピング、任意角度での回転、および加工後の永続化（ストレージへの保存）が含まれる。本稿では、これらの機能を統合的に提供するユーティリティクラス Imag ...
8月4日 17:36 投稿
Konva キャンバスライブラリの基本構造と操作
Konva は HTML5 Canvas を DOM のように操作できる高レベルなライブラリです。要素へのイベント処理、ドラッグ＆ドロップ、グループ化、変形機能を内蔵しており、パズルゲームやインタラクティブなビジュアルエディタの実装に適しています。また、html2canvas がモバイル端末でレンダリング不安定になる問題を解決する代替手段としても有効です。
Stage、Layer、Shape の関 ...
7月24日 22:44 投稿
Flutterにおけるカスタム描画の活用術
CustomPainterクラスの基本構造
FlutterではCustomPainter抽象クラスを使用して、独自の描画処理を実装することが可能です。このクラスを継承してpaintメソッドを実装することで、複雑なグラフィック表現を実現できます。
シンプルな円の描画例
class CirclePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Pai ...
7月12日 18:39 投稿
ngx-admin におけるチャートデータの PNG/SVG 一括エクスポート実装
ngx-admin は Angular 8 以上と Nebular フレームワークをベースに構築された管理画面テンプレートで、Bootstrap 4 および Angular Material の UI コンポーネントを活用し、Chart.js などのチャートライブラリとの連携も容易です。この記事では、ngx-admin 上で実装するチャートのエクスポート機能について、PNG および SVG 形式への完全な対応方法を解説します。
n ...
7月7日 22:08 投稿