How to style part of my drawn fabricjs text object? - javascript

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>

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>

If you want to also update the styles dynamically, you can use setSelectionStyles method like this:
const text = new fabric.TextBox('Regular Font', {
left: 50,
top: 100,
fontFamily: 'arial',
fill: '#333',
fontSize: 50,
});
const start = 0
const end = 5
text.setSelectionStyles({fontWeight: 'bold'}, start, end);

Related

Triangle Button Slider In ReactJS/MaterialUI

I'm struggling to make a perfect triangle button instead of a pizza slice button on a slider in Material UI and ReactJS, this is the task I want to complet exemple bellow:
And this is where I'm currently at:
//App
const CustumSlider = withStyles({
root: {
color: "transparent",
height: 2,
padding: '15px 0',
},
thumb: {
boxShadow: iOSBoxShadow,
marginLeft: -16,
width: 0,
height: 0,
borderLeft: "16px solid transparent",
borderRight: "16px solid transparent",
borderBottom: "16px solid #f39200",
cursor: "pointer",
marginTop: "9px",
'&:focus, &:hover, &$active': {
color: "transparent",
boxShadow: iOSBoxShadow,
'#media (hover: none)': {
boxShadow: iOSBoxShadow,
},
},
},
valueLabel: {
left: '-16px',
top: -25,
fontSize: 16,
fontFamily: "Nunito",
fontWeight: 700,
'& *': {
background: 'transparent',
color: '#f39200',
},
},
track: {
height: 15,
borderTopLeftRadius: "5px",
borderBottomLeftRadius: "5px",
color: "#003865",
},
rail: {
height: 15,
opacity: 0.5,
borderTopLeftRadius: "5px",
borderBottomLeftRadius: "5px",
borderTopRightRadius: "5px",
borderBottomRightRadius: "5px",
backgroundColor: "rgba(0, 0, 0, 0.4)",
},
mark: {
backgroundColor: '#bfbfbf',
height: 8,
width: 1,
marginTop: -3,
},
markActive: {
opacity: 1,
backgroundColor: 'currentColor',
},
})(Slider);
Is there any solution to getting a triangle button in the slider?
Just add
borderRadius: "0px",
to the thumb style
sandbox

How to select only the stroke in a transparent backgroud rectangle?

How can i make a transparent rectangle selectable only when i click on the stroke? I tried two different approach as you can see from the snippet below, the object on the left is a rectangle with a transparent background, the object on the right is a group object with multiple lines. I want to know how to be able to select the element only when i click on the stroke, with both objects if you click on the inner transparent area the object becomes selected.
var canvas = new fabric.Canvas('a');
canvas.add(new fabric.Rect({
left: 10,
top: 20,
height: 160,
width: 80,
fill: 'transparent',
stroke: 'red'
}));
var rectLine1 = new fabric.Line([0, 0, 80, 0], {
stroke: 'red',
left: 100,
top: 20
});
var rectLine2 = new fabric.Line([0, 160, 0, 0], {
stroke: 'red',
left: 100,
top: 20
});
var rectLine3 = new fabric.Line([0, 160, 0, 0], {
stroke: 'red',
left: 180,
top: 20
});
let rectLine4 = new fabric.Line([0, 0, 80, 0], {
stroke: 'red',
left: 100,
top: 180
});
var group = new fabric.Group([rectLine1, rectLine2, rectLine3, rectLine4], {
left: 110,
top: 20
})
canvas.add(group)
canvas.renderAll();
.c {
border: 2px solid black;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<canvas id="a" class="c" width="200" height="200"></canvas>
I found that setting perPixelTargetFind: true solves the problem, you can also set a tolerance on the canvas targetFindTolerance: 10 to be able to select objects with thin strokes. I'll paste the working code below in case anyone needs it.
var canvas = new fabric.Canvas('a', {
targetFindTolerance: 10
});
canvas.add(new fabric.Rect({
left: 10,
top: 20,
height: 160,
width: 80,
fill: 'transparent',
stroke: 'red',
perPixelTargetFind: true,
}));
canvas.renderAll();
.c {
border: 2px solid black;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>
<canvas id="a" class="c" width="200" height="200"></canvas>

How to draw a trapezium/trapezoid with react-native?

this is code by css at id works fine:
border-bottom: 100px solid #0000ff80;
border-right: 50px solid transparent;
height: 0;
width: 100px;
<div id="trapezoid"></div>
but my code on react-native doesn't work:
<View style={{width:100,height:0,borderBottomWidth:100,borderBottomColor:'#000',borderLeftWidth:0,borderRightWidth:50,borderRightColor:'#000'}}>
</View>
try this out
var Trapezoid = React.createClass({
render: function() {
return (
<View style={styles.trapezoid} />
)
}
})
trapezoid: {
width: 200,
height: 0,
borderBottomWidth: 100,
borderBottomColor: 'red',
borderLeftWidth: 50,
borderLeftColor: 'transparent',
borderRightWidth: 50,
borderRightColor: 'transparent',
borderStyle: 'solid'
}
for more such shapes checkout https://codedaily.io/tutorials/22/The-Shapes-of-React-Native
You can achieve it by a rectangle and a triangle in a row.
<View style={{ flexDirection: 'row' }}>
<View style={styles.rectangle} />
<View style={[styles.triangle, styles.triangleCornerBottomLeft]} />
</View>
const styles = StyleSheet.create({
rectangle: { width: 100, height: 100, backgroundColor: 'red' },
triangle: {
width: 0,
height: 0,
backgroundColor: 'transparent',
borderStyle: 'solid',
borderRightWidth: 100,
borderTopWidth: 100,
borderRightColor: 'transparent',
borderTopColor: 'red'
},
triangleCornerBottomLeft: {
transform: [
{rotate: '270deg'}
]
},
});

How to display element in proper position in FabricJs despite on it originX and Y?

I have two almost identical elements except for their top and origin.
I don't understand how to place them on the same left with 2 different origins.
Here is the expected view:
And here is what I get:
--> Here is the link to jsFiddler <--
Note: Their LEFT is same! This is what I'm getting from backend.
Tnx
var canvas = new fabric.Canvas('paper');
const red = new fabric.Rect({
left: 100,
top: 50,
fill: 'red',
width: 200,
height: 100,
originX: 'center',
originY: 'center'
});
const yellow = new fabric.Rect({
left: 100,
top: 150,
fill: 'yellow',
width: 200,
height: 100,
originX: 'left',
originY: 'top'
});
canvas.add(red);
canvas.add(yellow);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>
Is this what you want? Here left and top attrs are same.
var canvas = new fabric.Canvas('paper');
const red = new fabric.Rect({
left: 100,
top: 150,
fill: 'red',
width: 200,
height: 100,
originX: 'left',
originY: 'bottom'
});
const yellow = new fabric.Rect({
left: 100,
top: 150,
fill: 'yellow',
width: 200,
height: 100,
originX: 'left',
originY: 'top'
});
canvas.add(red);
canvas.add(yellow);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.0/fabric.min.js"></script>
<canvas id="paper" width="400" height="400" style="border:1px solid #ccc"></canvas>

FabricJS iText grow from center

How can you make a text object on the FabricJS canvas grow/shrink from the center and expand bidirectionally when text is added or removed?
I have tried adding centeredScaling: true but this is only for resizing (scaling) the object, not adding/removing text.
If you check my demo you'll see that when you click the text and add more characters to the object it expands to the right only, leaving the text off center.
var canvas = this.__canvas = new fabric.Canvas('c');
var cWidth = 600;
var cHeight = 200;
canvas.setWidth(cWidth);
canvas.setHeight(cHeight);
function Addtext() {
canvas.add(new fabric.IText('Text', {
left: (cWidth / 2) - 83,
top: (cHeight / 2) - 25,
fontFamily: 'arial black',
fill: '#333',
fontSize: 50,
centeredScaling: true,
}));
}
#c {
border: 1px solid red;
top: 22px;
left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button onclick="Addtext()">Add Text</button>
<canvas id="c"></canvas>
Add align and origin of x and y to center.
var canvas = this.__canvas = new fabric.Canvas('c');
var cWidth = 600;
var cHeight = 200;
canvas.setWidth(cWidth);
canvas.setHeight(cHeight);
function Addtext() {
canvas.add(new fabric.IText('Text', {
left: (cWidth / 2) - 83,
top: (cHeight / 2) - 25,
fontFamily: 'arial black',
fill: '#333',
fontSize: 50,
align: 'mid', //added
originX: 'center', //added
originY: 'center', //added
centeredScaling: true,
}));
}
#c {
border: 1px solid red;
top: 22px;
left: 0px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button onclick="Addtext()">Add Text</button>
<canvas id="c"></canvas>

Categories