Scale rectangle object from middle – fabricjs - javascript

I have a rectangle object on fabricjs canvas. Now, when I try to scale the rectangle it always scales from a fixed corner and only expands to the direction where the mouse is. What I want is, when I scale it should scale from center and expand either side. I tried setting originX and originY but that didn’t work. Can anyone help me on this? Thanks!
var rect = new fabric.Rect({
top: 150,
left: 150,
width: 100,
height: 100,
fill: 'black',
originX: 'center',
originY: 'center',
});

You need to set centeredScaling property to true for the rectangle object to make its' scale origin to center ...
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
top: 100,
left: 100,
width: 50,
height: 50,
fill: 'black',
originX: 'center',
originY: 'center',
centeredScaling: true
});
canvas.add(rect).renderAll();
canvas{border: 1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="c" width="200" height="200"></canvas>

Related

move a horizontal line to the center in StyledSheets

I have drawn a horizontal line like this. However, it appears towards the left side of the screen. I don't want to increase the width. How else can I move it to the center? I tried wrapping it with another view along with alignContent: 'center' etc but it didn't work for me.
<View style={styles.horizontalLine}></View>
horizontalLine: {
marginTop: 25,
width: '80%',
height: 1,
//alignContent: 'center',
//width: 1,
backgroundColor: '#E0E0E0',
},
Add an alignSelf:'center' like below
horizontalLine: {
marginTop: 25,
width: '80%',
height: 1,
//alignContent: 'center',
//width: 1,
alignSelf: 'center',
backgroundColor: '#E0E0E0',
}
You can give horizontal margin: auto
horizontalLine: {
// ...
marginLeft: 'auto',
marginRight: 'auto',
// ...
},
Try this...
horizontalLine: {
margin: 'auto',
marginTop: 25,
width: '80%',
height: 1,
backgroundColor: '#E0E0E0',
}

Updating Easy Pie Chart

I managed to update easy pie chart, but I don't know how to display the percentage and update it, for example from 1% to 25%, number by number, as the chart updates. Any help?
This is the block of code where I am updating my chart:
var chart = new EasyPieChart(existing, {
lineWidth: '6',
barColor: '#fff',
trackColor: 'rgba(255, 255, 255, 0.5)',
scaleColor: false,
});
chart.update(25);
You could use easy-pie-chart's onStep callback function, which will be called on every step to update the number somewhere on the page.
Also, you probably want to round the number using Math.round
var element = document.querySelector('.chart');
var chart = new EasyPieChart(element, {
lineWidth: '6',
barColor: '#000',
trackColor: 'rgba(255, 255, 255, 0.5)',
scaleColor: true,
onStep: function(from, to, currentValue) {
// Inside the callback, 'this.el' refers to
// the element that EasyPieChart was created with
// - `.chart`
this.el.querySelector('.number').innerText = `${Math.round(currentValue)}%`;
},
});
chart.update(25);
.chart {
display: inline-block;
position: relative;
}
.number {
font-size: 1.8rem;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div class="chart">
<span class="number"></span>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/easy-pie-chart/2.1.6/easypiechart.min.js"></script>

How to put a text inside a rect using konva.js?

I have a project with some rects and I need to put text inside them. Is there a Konva class that does this?
I have tried using Konva.group (), label ...
This was my last attempt, at the beginning the text stands as it should but when moving the Rect the position is not updated.
var rect = new Konva.Rect({
x: 20,
y: 60,
stroke: '#123456',
strokeWidth: 5,
fill: '#ddd',
width: 600,
height: 450,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 10,
draggable: true,
})
var complexText = new Konva.Text({
x: ((rect.attrs.width + rect.attrs.x) - 300)/2 ,
y: ((rect.attrs.height + rect.attrs.y))/2,
text:
"COMPLEX TEXT\n\nAll the world's a stage, and all the men and women merely players. They have their exits and their entrances.",
fontSize: 18,
fontFamily: 'Calibri',
fill: '#555',
width: 300,
height:300,
align: 'center',
draggable: true,
});
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
draggable: true
});
var rectangleLayer = new Konva.Layer();
function spawnRectangle(angle){
var rectangle = new Konva.Group({
x: 25,
y: 25,
width: 130,
height: 25,
rotation: angle,
draggable: true,
});
rectangle.add(new Konva.Rect({
width: 130,
height: 25,
fill: 'lightblue'
}));
rectangle.add(new Konva.Text({
text:'123',
fontSize: 18,
fontFamily: 'Calibri',
fill: '#000',
width: 130,
padding: 5,
align: 'center'
}));
rectangleLayer.add(rectangle);
stage.add(rectangleLayer);
}
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #D3D3D3;
background-size: cover;
}
#desc {
position : absolute;
top: 5px;
left: 5px;
}
<script src="https://unpkg.com/konva#4.0.18/konva.min.js"></script>
<body>
<div id="container"></div>
<div id="desc">
<button onclick="spawnRectangle(0)">spawn rectangle</button>
<button onclick="spawnRectangle(90)">spawn rotated rectangle</button>
</div>
</body>
Your options are:
Use Konva.Label
Create a draggable group with rectangle and text inside
Create one custom shape. Draw rectangle and text inside sceneFunc

How to navigate to a specific object location programatically in fabricjs

When I have a bunch of objects on canvas at different locations and my web page has scrollbars for canvas area, I have navigation buttons for next/prev which makes the respective object as active by calling canvas.setActiveObject() but I need to auto scroll to that specific location.
I haven't found anything on the html canvas context to achieve that.
canvas.getContext().moveTo(x, y); moves the pointer logically but I need to move physically.
function gonext(idx) {
var objs = fcanvas.getObjects();
fcanvas.setActiveObject(objs[idx]);
}
var fcanvas = new fabric.Canvas("mycanvas");
fcanvas.setWidth(500);
fcanvas.setHeight(1200);
var rect = new fabric.Rect({
left: 10,
top: 10,
width: 50,
height: 50,
fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.setActiveObject(rect);
var rect = new fabric.Rect({
left: 10,
top: 1100,
width: 50,
height: 50,
fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.renderAll();
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="gonext(1)">Next</button>
<div >
<canvas id="mycanvas" style="border:1px solid black"></canvas>
</div>
Here is the jsfiddle in action, clicking on NEXT will make the next object active but I also need to scroll down to that object
Any direction on this one?
Maybe you have to adjust offset in your page, but a simple window.scrollTo doens't help you?
Please try the executable snippet below:
function gonext(idx) {
var objs = fcanvas.getObjects();
var obj = objs[idx];
fcanvas.setActiveObject(obj);
window.scrollTo(0, obj.top);
}
var fcanvas = new fabric.Canvas("mycanvas");
fcanvas.setWidth(500);
fcanvas.setHeight(1200);
var rect = new fabric.Rect({
left: 10,
top: 10,
width: 50,
height: 50,
fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.setActiveObject(rect);
var rect = new fabric.Rect({
left: 10,
top: 1100,
width: 50,
height: 50,
fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.renderAll();
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="gonext(1)">Next</button>
<div >
<canvas id="mycanvas" style="border:1px solid black"></canvas>
</div>
The issue I had was, canvas was inside a nested DIVs, I had do use.scrollTop on my root div to fix the issue

How to create fabricjs object with fix height and width?

I have created fabricJS object (fabric.Text) successfully. But now I want that object with fixed height and width. Currently when I edits text of the object, it(object) is scaled. But now I want object with fixed height and width. And when I edits text, text should be condense (reduce width of text and decrease size of spacing) and height and width of object should be fixed. Here is reference link (in which center text is what I have to develop). Here is my code.
$(function () {
var fontfamily = 'Arial';
var fontsize = 30;
var fontspacing = $('#fontspacing').val();
var canvas = new fabric.Canvas('c');
var text = new fabric.Text($('#text').val(), {
top: 250,
left: 250,
centeredScaling: true,
hasControls: true,
hasBorders: false,
textAlign: 'center',
fontSize: fontsize,
fontFamily: fontfamily,
originX: 'center'
});
canvas.add(text).renderAll();
$('#text').on('keyup', function () {
canvas.setActiveObject(canvas.item(canvas.getObjects().length - 1));
var obj = canvas.getActiveObject();
if (obj) {
obj.setText($('#text').val());
canvas.renderAll();
}
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<script src="https://rawgit.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script>
</head>
<body>
<div class="row">
<div class="row canvas-container" style="width: 50%; float: left;">
<canvas id="c" width="500" height="500" style="border:1px dotted #000; border-radius: 50%;"></canvas><br>
</div>
<div class="row" style="float: left; width: 50%; height: 150px; background-color: violet;">
Text :
<input type="text" id="text" /><br>
</div>
</div>
</body>
</html>

Categories

Resources