textarea
<h3>定义示例</h3>
<pre><code class="language-js">// 文件 '@/lib/fabric/src/zGroup/textarea/textarea-default.js
import { fabric } from '@/lib/fabric'
const defaultOpts = {
scheme: 'default',
name: 'textarea',
autoPosition: true,
top: 0,
left: 0,
width: 500,
height: 200
}
const textarea = function (datas, options) {
const { text } = datas
if (!text || typeof text!=='string' || text.length == 0) return
const opt = { ...defaultOpts ,...options }
const { scheme, name, autoPosition, left, top, width, height } = opt
// some code...
}
export default textarea
</code></pre>
<h3>使用示例</h3>
<pre><code class="language-javascript">import { fabric } from '@/lib/fabric'
const textareaObj = fabric.zGroup.textarea(datas, options)</code></pre>
<h3>数据参数 datas</h3>
<pre><code class="language-json">//options 默认值
{
text: '文字内容'
}</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left;">属性</th>
<th style="text-align: left;">名称</th>
<th style="text-align: left;">默认</th>
<th>值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;"><strong>text</strong></td>
<td style="text-align: left;">文字内容</td>
<td style="text-align: left;">“”</td>
<td>String</td>
</tr>
</tbody>
</table>
<h3>选项参数 options</h3>
<pre><code class="language-json">//options 默认值
{
scheme: 'default',
autoPosition: true,
top: 0,
left: 0,
width: 500,
height: 200,
fontSize: 20,
overflow: 'hidden', // scale / hidden / visible
textIndent: 2, // 首行缩进
letterSpacing: 2, //px
lineHeight: 1.16, //ratio
padding: 30 //内边距
}</code></pre>
<table>
<thead>
<tr>
<th style="text-align: left;">属性</th>
<th style="text-align: left;">名称</th>
<th style="text-align: left;">默认</th>
<th>值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;"><strong>scheme</strong></td>
<td style="text-align: left;">样式方案名</td>
<td style="text-align: left;">default</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;"><strong>autoPosition</strong></td>
<td style="text-align: left;">自动定位</td>
<td style="text-align: left;">true</td>
<td>Boolean</td>
</tr>
<tr>
<td style="text-align: left;"><strong>top</strong></td>
<td style="text-align: left;">顶距</td>
<td style="text-align: left;">0</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;"><strong>left</strong></td>
<td style="text-align: left;">左距</td>
<td style="text-align: left;">0</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;"><strong>width</strong></td>
<td style="text-align: left;">宽</td>
<td style="text-align: left;"></td>
<td>500</td>
</tr>
<tr>
<td style="text-align: left;"><strong>height</strong></td>
<td style="text-align: left;">高</td>
<td style="text-align: left;">200</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">overflow</td>
<td style="text-align: left;">溢出</td>
<td style="text-align: left;">hidden</td>
<td>scale / hidden / visible</td>
</tr>
<tr>
<td style="text-align: left;">textIndent</td>
<td style="text-align: left;">首行缩进</td>
<td style="text-align: left;">2</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">letterSpacing</td>
<td style="text-align: left;">字距</td>
<td style="text-align: left;">2</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">lineHeight</td>
<td style="text-align: left;">行距</td>
<td style="text-align: left;">1.16</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">padding</td>
<td style="text-align: left;">内边距</td>
<td style="text-align: left;">30</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">fontFamily</td>
<td style="text-align: left;">字体</td>
<td style="text-align: left;">"Times New Roman"</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">fontSize</td>
<td style="text-align: left;">字号</td>
<td style="text-align: left;">40</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">fontStyle</td>
<td style="text-align: left;">字样式</td>
<td style="text-align: left;">normal</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">fontWeight</td>
<td style="text-align: left;">粗体</td>
<td style="text-align: left;">normal</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">textAlign</td>
<td style="text-align: left;">对齐方式</td>
<td style="text-align: left;">left</td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">textBackgroundColor</td>
<td style="text-align: left;">背景颜色</td>
<td style="text-align: left;"></td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">fill</td>
<td style="text-align: left;">填充颜色</td>
<td style="text-align: left;"></td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">stroke</td>
<td style="text-align: left;">描边颜色</td>
<td style="text-align: left;"></td>
<td></td>
</tr>
<tr>
<td style="text-align: left;">strokeWidth</td>
<td style="text-align: left;">描边宽度</td>
<td style="text-align: left;"></td>
<td>-</td>
</tr>
</tbody>
</table>