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>
Related
I have a basic Graphics User Interface where if the user clicks "move"
then a div (yellow rectangle) moves across the screen.
However, I want there to be an event based on Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv()
{
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv(){
if ($('#myDiv').css == marginTop: '-=15px' ) {
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
errors mostly because im not sure on the syntax :(
hope its help you
You must use var (let, const) when create a new variable
I added CONSTANTS for easy configuration,
isDivCanMoveForward for your:
Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
var MAX_POSITION_OF_DIV_NODE = 400;
var STEP_OF_DIV_NODE = 100;
var div = document.getElementById("myDiv");
var currentPositionOfDivNode = parseInt(div.style.left, 10);
function MoveDiv() {
currentPositionOfDivNode += STEP_OF_DIV_NODE; // increment
if (!isDivCanMoveForward()) {
return; // stop functinon when div have max position
}
div.style.left = currentPositionOfDivNode + "px";
}
function isDivCanMoveForward() {
if (currentPositionOfDivNode > MAX_POSITION_OF_DIV_NODE) {
currentPositionOfDivNode = MAX_POSITION_OF_DIV_NODE // set max of value
alert('hey')// user message
return false;
}
return true;
}
<html>
<head>
<title>Move Div</title>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
How can I use the object.set({}) and then have hover area update.
For example when I move a rect to the left, visually the rect has moved but the hover area is still based on the previous left position.
Do I need to do an additional render?
I figured canvas.renderAll() would be enough
Here is a demo
const canvas = new fabric.Canvas(document.getElementById("myCanvas"));
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: "red",
left: 25,
top: 25
});
canvas.add(rect);
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
rect.set({ left: 125 });
canvas.renderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app"></div>
<button id="btn">move left</button>
<canvas id="myCanvas" width="300" height="200" ></canvas>
</body>
</html>
https://codesandbox.io/s/rlo3ojwvp4
You need to set coordinates after move,check When-to-call-setCoords
DEMO
const canvas = new fabric.Canvas(document.getElementById("myCanvas"));
var rect = new fabric.Rect({
width: 100,
height: 100,
fill: "red",
left: 25,
top: 25
});
canvas.add(rect);
const btn = document.getElementById("btn");
btn.addEventListener("click", () => {
rect.set({ left: 125 });
rect.setCoords();
canvas.renderAll();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.6/fabric.min.js"></script>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<div id="app"></div>
<button id="btn">move left</button>
<canvas id="myCanvas" width="300" height="200" ></canvas>
</body>
</html>
I'm adding objects to my canvas with the fabricjs library (1.7.21) however I am getting this odd behavior where objects are appearing to be behind the canvas. The text is either displayed as white or behind the canvas and I'm not sure why or how. What am I missing here?
var canvas = this.__canvas = new fabric.Canvas('canvas');
responsive();
window.addEventListener('resize', responsive);
function responsive() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
var widthn = width - 10;
var heightn = height - 10;
canvas.setDimensions({
width: widthn,
height: heightn
});
}
function clearcan() {
var txt;
if (confirm("Chuck this?")) {
console.log(canvas)
canvas.clear().renderAll();
newleft = 0;
}
}
// Add Text
function Addtext() {
var text = new fabric.IText("Tape & Type...", {
fontSize: 30,
top: 10,
left: 10,
width: 200,
height: 200,
textAlign: "center"
});
canvas.add(text);
canvas.setActiveObject(text);
text.enterEditing();
text.selectAll();
text.renderCursorOrSelection(); // or canvas.renderAll();
}
body {
background-color: #303030;
color: white;
}
canvas {
border-radius: 3px;
border: 1px solid #3030;
margin: 5px;
background-color: white;
}
.btn {
background-color: #3030;
color: white;
}
<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.7.21/fabric.min.js"></script>
<div class="col d-flex justify-content-center">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button onclick="clearcan();" type="button" class="btn btn-sm">Clear</button>
<button onclick="Addtext()"type="button" class="btn btn-sm"> Add Text</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
Here's my JSFiddle.
Remove background-color from css which applies to both upper and lower canvas. use this
var canvas = this.__canvas = new fabric.Canvas('canvas',{
backgroundColor:'white'
});
It will make lower canvas background white.
DEMO
var canvas = this.__canvas = new fabric.Canvas('canvas',{
backgroundColor:'white'
});
responsive();
window.addEventListener('resize', responsive);
function responsive() {
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
var height = (window.innerHeight > 0) ? window.innerHeight : screen.height;
var widthn = width - 10;
var heightn = height - 10;
canvas.setDimensions({
width: widthn,
height: heightn
});
}
function clearcan() {
var txt;
if (confirm("Chuck this?")) {
console.log(canvas)
canvas.clear().renderAll();
newleft = 0;
}
}
// Add Text
function Addtext() {
var text = new fabric.IText("Tape & Type...", {
fontSize: 30,
top: 10,
left: 10,
width: 200,
height: 200,
textAlign: "center"
});
canvas.add(text);
canvas.setActiveObject(text);
text.enterEditing();
text.selectAll();
text.renderCursorOrSelection(); // or canvas.renderAll();
}
body {
background-color: #303030;
color: white;
}
canvas {
border-radius: 3px;
border: 1px solid #3030;
margin: 5px;
//background-color: white;
}
.btn {
background-color: #3030;
color: white;
}
<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.7.21/fabric.min.js"></script>
<div class="col d-flex justify-content-center">
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button onclick="clearcan();" type="button" class="btn btn-sm">Clear</button>
<button onclick="Addtext()"type="button" class="btn btn-sm"> Add Text</button>
</div>
</div>
</div>
<canvas id="canvas"></canvas>
I'm using fabricjs 1.7.20 and have "select" and "draw" modes. How can I make it so that when I add text (with the button, while still in draw mode) it sets the mode to the select mode so that I can edit the text object immediately?
var canvas = new fabric.Canvas("c", {
backgroundColor: "#fff"
});
canvas.setHeight(300);
canvas.setWidth(300);
// Add text
function Addtext() {
var text = new fabric.IText("Tap & type", {
fontSize: 30,
top: 10,
left: 10,
width: 200,
height: 200,
textAlign: "center"
});
canvas.add(text);
canvas.setActiveObject(text);
}
// Modes
$("#select").click(function() {
canvas.isDrawingMode = false;
});
$("#draw").click(function() {
canvas.isDrawingMode = true;
});
canvas {
border: 1px solid #dddddd;
margin-top: 10px;
border-radius: 3px;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<button onclick="Addtext()">Add Text</button>
<button id="draw">Draw Mode</button>
<canvas id="c"></canvas>
You can use enterEditing() from text methods, and also a selectAll() if you need to.
var canvas = new fabric.Canvas("c", {
backgroundColor: "#fff"
});
canvas.setHeight(300);
canvas.setWidth(300);
// Add text
function Addtext() {
var text = new fabric.IText("Tap & type", {
fontSize: 30,
top: 10,
left: 10,
width: 200,
height: 200,
textAlign: "center"
});
canvas.add(text);
canvas.setActiveObject(text);
text.enterEditing();
text.selectAll();
text.renderCursorOrSelection(); // or canvas.renderAll();
canvas.isDrawingMode = false;
}
// Modes
$("#select").click(function() {
canvas.isDrawingMode = false;
});
$("#draw").click(function() {
canvas.isDrawingMode = true;
});
canvas {
border: 1px solid #dddddd;
margin-top: 10px;
border-radius: 3px;
}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.20/fabric.min.js"></script>
<button onclick="Addtext()">Add Text</button>
<button id="draw">Draw Mode</button>
<canvas id="c"></canvas>
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