<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
</head>
<body>
<h1>fabricjs, text follow cursor, enter text edit<small>eligeske</small></h1>
<label>Font Size:</label>
<select id="fontSize">
<option>5</option>
<option>8</option>
<option>12</option>
<option>15</option>
<option>18</option>
<option>22</option>
<option selected>24</option>
<option>48</option>
</select>
<div id="my_cont" style="height: 500px; width: 500px; border: 1px dashed blue">
<canvas id="canvas" style="border: 2px solid #ccc;box-sizing: border-box"></canvas>
</div>
<script src="demoSetup.js"></script>
<script>
</script>
</body>
</html>
// Code goes here
var $cont = $('#my_cont'),
$select = $('#fontSize'),
$canvasEle = $('#canvas'),
canvasF = new fabric.Canvas($canvasEle[0]);
var cursor = new fabric.Text("Aa");
cursor.lockScalingX = true;
cursor.lockScalingY = true;
cursor.lockUniScaling = true;
cursor.setFontSize(24);
canvasF.add(cursor);
var hoverTarget = {
obj: null,
type: null
};
canvasF.on('mouse:move', function(evt){
cursor.set({
left: evt.e.layerX,
top: evt.e.layerY
});
canvasF.renderAll();
});
canvasF.on('mouse:down', function(evt){
var t = newITextFromText(cursor);
canvasF.add(t).setActiveObject(t);
t.enterEditing();
});
var newITextFromText = function (textObj) {
return new fabric.IText("",{
top: textObj.top,
left: textObj.left,
fontSize: textObj.fontSize,
fontFamily: textObj.fontFamily
});
}
$select.change(function(){
cursor.setFontSize($(this).val());
});
/*************************/
/* CANVAS ****************/
/*************************/
function scale (number){
canvasF.setZoom(number);
canvasF.setWidth($cont.width()*number);
canvasF.setHeight($cont.height()*number);
}
scale(1);
/* Styles go here */
ul li { display: inline-block; border: 1px solid #ccc; cursor: pointer; padding: 5px 15px; }
ul li.active { color: #fff; background-color: black; }
canvas {
cursor: none !important;
}
small {
display: block;
color: #ccc;
font-weight: normal;
font-style: italic;
}