Fabric画一个文字内容为text的button按钮,文字内容要在按钮里居中
时间: 2023-02-07 18:57:07 浏览: 153
你可以使用 Fabric.js 的 `fabric.Text` 类创建一个文字元素,并将其作为一个按钮的子元素。然后,你可以设置文本元素的 `textAlign` 属性为 "center",使文本内容在按钮中居中。
以下是一个简单的例子:
```javascript
var button = new fabric.Rect({
width: 100,
height: 50,
fill: '#ccc',
stroke: '#333',
strokeWidth: 2
});
var text = new fabric.Text('Button', {
textAlign: 'center',
fontSize: 20
});
button.add(text);
```
在这个例子中,我们创建了一个矩形按钮,然后创建了一个文本元素,并将它作为按钮的子元素。最后,我们设置文本元素的 `textAlign` 属性为 "center",使文本内容在按钮中居中。
希望这能帮到你!
相关问题
Fabric画一个文字内容为text的button按钮
可以使用 Fabric.js 来创建一个文字内容为 text 的按钮。
首先,需要在 HTML 页面中引入 Fabric.js 库:
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
```
然后,你可以使用下面的代码在 Fabric.js 中画一个文字内容为 text 的按钮:
```
var canvas = new fabric.Canvas('canvas');
var text = new fabric.Text('text', {
left: 100,
top: 100,
fill: 'black',
fontSize: 20
});
var button = new fabric.Rect({
left: 80,
top: 80,
width: text.width + 20,
height: text.height + 20,
fill: 'white',
stroke: 'black',
strokeWidth: 2
});
var group = new fabric.Group([button, text], {
left: 100,
top: 100
});
canvas.add(group);
```
在这段代码中,我们创建了一个文字对象(text)和一个矩形对象(button),然后将它们组合起来形成一个按钮。最后,我们将这个按钮添加到 canvas 中。
阅读全文