Fabric.js でカスタム テキストボックスを構築する方法: ストローク、丸み、パディング

Fabric.js は、HTML5 キャンバス要素の使用を効率化し、開発者が魅力的な Web アプリケーションを簡単に作成できるようにする優れたJavaScriptライブラリです。多数の機能とツールが満載されており、ユーザーはインタラクティブで視覚的に美しいインターフェースを設計できます。

Fabric.jsの注目すべき利点は、カスタム クラスを生成する機能にあり、開発者がその機能を拡張し、独自の要件を満たすようにカスタマイズできるようになります。

このブログでは、Fabric.js でパーソナライズされたクラスを設計して利用するプロセスについて詳しく説明します。私たちは、角が丸くパディングされたストローク付きのテキストボックスの開発に焦点を当てます。さらに、さまざまなシナリオに対応するためのこのクラスの適応性を調査します。このブログを完了すると、Fabric.js でカスタム クラスを作成し、それらを利用してキャンバス アプリケーションを強化する方法を包括的に理解できるようになります。

ストローク付きテキストボックスクラスの作成

Strked Textbox クラスは、Fabric.js のデフォルトの Textbox クラスの拡張であり、ストロークの幅、ストロークの色、パディング、丸い角などのさまざまな追加機能が導入されています。

このクラス内のコードの各行を分析してみましょう。

• type: "textbox":この行は、作成されるオブジェクトのタイプを指定します。

• ストローク幅: 5:この行はストローク幅を 5 ピクセルに設定します。

• ストロークカラー: "#ffb64f":この行はストロークの色を #ffb64f として決定します。

• splitByGrapheme: true:この行は、テキストボックスを書記素に基づいて分割する必要があることを示します。

• rx: 0:この行は rx に値 0 を割り当て、x 軸の丸めの程度を制御します。

• ry: 0:この行は ry に 0 の値を割り当て、y 軸の丸めの程度を制御します。

• toObject:この関数は、Textbox クラスのすべてのプロパティと、Stroked Textbox クラスによって導入された新しいプロパティを含むオブジェクトを返します。

• _renderBackground: _renderBackground: この関数は、パディング、丸い角、ストロークを含むテキストボックスの背景のレンダリング プロセスを監視します。

  
  

 fabric.TextboxWithPadding = fabric.util.createClass(fabric.Textbox, { type: "textbox", strokeWidth: 5, // Specifies the width of the stroke strokeColor: "#ffb64f", // Sets the color of the stroke splitByGrapheme: true, rx: 0, // Determines the rx value for rounded corners on the x-axis ry: 0, // Determines the ry value for rounded corners on the y-axis toObject: function() { return fabric.util.object.extend(this.callSuper("toObject"), { backgroundColor: this.get("backgroundColor"), padding: this.get("padding"), splitByGrapheme: this.get("splitByGrapheme"), rx: this.get("rx"), ry: this.get("ry") }); }, _renderBackground: function(ctx) { if (!this.backgroundColor) { return; } var dim = this._getNonTransformedDimensions(); ctx.fillStyle = this.backgroundColor; ctx.fillRect( -dim.x / 2 - this.padding, -dim.y / 2 - this.padding, dim.x + this.padding * 2, dim.y + this.padding * 2 ); // Stroke only at the top ctx.strokeStyle = this.strokeColor; ctx.lineWidth = this.strokeWidth; ctx.beginPath(); ctx.moveTo(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding); ctx.lineTo(-dim.x / 2 - this.padding, dim.y / 2 + this.padding); ctx.stroke(); ctx.beginPath(); ctx.strokeStyle = this.strokeColor; ctx.lineWidth = 0.2; // Set line width to 1 ctx.lineTo(dim.x / 2 + this.padding, -dim.y / 2 - this.padding + 1); ctx.lineTo(dim.x / 2 + this.padding, dim.y / 2 + this.padding - 1); ctx.strokeStyle = "#9181fc"; ctx.lineWidth = 0.2; // Set line width to 1 ctx.lineTo(dim.x / 2 + this.padding - 1, dim.y / 2 + this.padding); ctx.lineTo(-dim.x / 2 - this.padding + 1, dim.y / 2 + this.padding); ctx.strokeStyle = "#9181fc"; ctx.lineWidth = 0.2; // Set line width to 1 ctx.lineTo(-dim.x / 2 - this.padding, dim.y / 2 + this.padding - 1); ctx.lineTo(-dim.x / 2 - this.padding, -dim.y / 2 - this.padding + 1); ctx.closePath(); ctx.stroke(); // If there is a background color, no other shadows should be casted this._removeShadow(ctx); } });

コードベース

https://github.com/dinesh-rawat-dev/Prodeasy-section-component

デモ

https://y5k9l8.csb.app/

クラスを利用するメリット

Stroked Textbox クラスを使用すると、デフォルトの Textbox クラスの機能を超える独特の視覚属性を備えたパーソナライズされたテキストボックスを生成できるようになります。これにより、視覚的な魅力が向上し、その独自性で視聴者を魅了し、この分野の他のアプリケーションとは一線を画すキャンバス アプリケーションを作成できるようになります。

Strokeed Textbox クラスの使用

Stroked Textbox クラスを利用するには、クラスの新しいインスタンスを簡単に生成し、必要なパラメーターを提供します。以下は、クラスの使用法を示す例で、パディング、丸い角、さまざまなストロークの色と幅を備えたテキストボックスの作成を示しています。

 const textbox = new fabric.TextboxWithPadding('Inpur field', { fontFamily: "Roboto", // fontSize: 20, padding: 5, width: 100, textAlign: 'left', //@ts-ignore // left: rect.left + 20, //@ts-ignore // top: rect.top + 10, selectable: true, evented: true, editable: true, //@ts-ignore placeholder: "", splitByGrapheme: true, // lockScalingX: true, // lockScalingY: true, lockMovementX: true, lockMovementY: true, fill: '#000000', fontSize: 10, // stroke: OBJECT_BORDER_COLOR, strokeWidth: 1, backgroundColor: "#d5d1eb", //@ts-ignore left: 30, //@ts-ignore top: 30, className: "text_box_with_padding", includeDefaultValues: true, intersectsWithFrame: true, hasControls: false, hasBorders: true, });

この特定のインスタンスでは、 fontFamily 、 padding 、 width 、 textAlign 、 selectable 、 evented 、 editable 、 splitByGrapheme 、 fill 、 fontSize 、 strokeWidth 、 backgroundColor 、 hasControls 、およびhasBordersなどのプロパティを構成することで、テキストボックスの外観と動作をカスタマイズしました。

Strokeed Textbox クラスのカスタマイズ

Stroked Textbox クラスをさらにカスタマイズするには、2 つの方法があります。まず、クラス自体内でパラメータ値を直接変更できる機能があります。

あるいは、Stroked Textbox クラスを拡張して追加機能を導入する新しいサブクラスを作成することもできます。特定の要件に合わせてクラスを調整する方法について、いくつかの提案を示します。

1. ストロークの幅を調整する:ストロークの太さを変更するには、ストローク幅パラメータを変更します。パラメータを調整することで、ストロークの太さを定義できます。値を増やすとより太いストロークが作成され、値を減らすとより細かいストロークが作成されます。

   たとえば、ストローク幅を 10 に設定すると、デフォルト値の 5 と比較して太いストロークを持つテキストボックスが作成されます。

   
   

2. ストロークの色を変更します。

   このパラメータを使用すると、ストロークの色相を変更できるため、デザインの選択がより柔軟になります。

   16 進コードまたは名前付きの色を利用できます。たとえば、 strokeColor 「#ff0000」に設定すると、赤いストロークが生成されます。

   
   

3. パディングを変更する:ストロークの色を変更するには、ストロークカラーの値を調整します。これにより、テキストとテキストボックスの端の間のスペースが決まります。たとえば、パディングを 10 に設定すると、テキストの周囲のスペースが増加します。

   
   

4. 角の丸みを調整する:テキストボックスの角の丸みの程度を変更するには、rx と ry の値を変更します。これらのパラメータは、それぞれ x 軸と y 軸の丸めのレベルを制御します。たとえば、rx と ry の両方を 10 に設定すると、より顕著な丸い角を持つテキストボックスが作成されます。

さらに、Stroked Textbox クラスを拡張し、追加の機能を組み込む新しいサブクラスを作成するオプションもあります。このアプローチにより、カスタマイズの可能性がさらに広がり、テキストボックスに新しい機能を導入できるようになります。たとえば、テキストボックスにドロップシャドウを追加したり、ユーザー入力に基づいてフォントを動的に変更したりするサブクラスを作成できます。カスタマイズの可能性は膨大であり、Stroked Textbox クラスは構築するための優れた基盤として機能します。