Issue
I have some code that allows me to toggle between text objects. I'd like to have the text objects include some styling, like Bold, Italic, etc for titles and such. text, however, am not sure how to accomplish this. Here's my current code:
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setHeight(300);
canvas.setWidth(500);
function textOne() {
canvas.clear();
canvas.add(new fabric.IText('Regular Font', {
left: 50,
top: 100,
fontFamily: 'arial',
fill: '#333',
fontSize: 50
}));
}
function textTwo() {
canvas.clear();
canvas.add(new fabric.IText('Bold Font', {
left: 50,
top: 100,
fontFamily: 'arial',
fontWeight: 'bold',
fill: '#333',
fontSize: 50
}));
}
canvas {
border: 1px solid #dddddd;
border-radius: 3px;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>
Solution
You can use the styles
property to style individual characters
http://fabricjs.com/docs/fabric.IText.html#styles
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setHeight(300);
canvas.setWidth(500);
function textOne() {
canvas.clear();
canvas.add(new fabric.IText('Regular Font', {
left: 50,
top: 100,
fontFamily: 'arial',
fill: '#333',
fontSize: 50,
styles:{
0:{
0:{fontWeight: 'bold'},
1:{fontWeight: 'bold'}
}
}
}));
}
function textTwo() {
canvas.clear();
canvas.add(new fabric.IText('Bold Font', {
left: 50,
top: 100,
fontFamily: 'arial',
fontWeight: 'bold',
fill: '#333',
fontSize: 50,
styles:{
0:{
0:{fontSize: 40},
1:{fontSize: 30}
}
}
}));
}
canvas {
border: 1px solid #dddddd;
border-radius: 3px;
margin-top: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<button onclick="textOne()">One</button>
<button onclick="textTwo()">Two</button>
<canvas id="c"></canvas>
Answered By - user700284
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.