<!DOCTYPE html>
<html lang="en" ng-app="kitchensink">
<head>
<meta charset="utf-8">
<title></title>
<script>
(function() {
var fabricUrl = 'http://fabricjs.com/lib/fabric.js';
if (document.location.search.indexOf('load_fabric_from=') > -1) {
var match = document.location.search.match(/load_fabric_from=([^&]*)/);
if (match && match[1]) {
fabricUrl = match[1];
}
}
document.write('<script src="' + fabricUrl + '"><\/script>');
})();
</script>
<script src="http://fabricjs.com/js/master.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="https://cdn.muicss.com/mui-latest/css/mui.min.css" rel="stylesheet" type="text/css" />
<link href="https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/static/style.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.muicss.com/mui-latest/js/mui.min.js"></script>
<script src="https://www.muicss.com/examples/v1/example-layouts/responsive-side-menu/static/script.js"></script>
</head>
<body>
<div id="bd-wrapper" ng-controller="CanvasControls">
<script src="http://fabricjs.com/lib/jquery.js"></script>
<script src="http://fabricjs.com/lib/bootstrap.js"></script>
<script src="http://fabricjs.com/js/paster.js"></script>
<link rel="stylesheet" href="http://fabricjs.com/css/bootstrap.css">
<link rel="stylesheet" href="http://fabricjs.com/css/kitchensink.css">
<link href='http://fonts.googleapis.com/css?family=Plaster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Engagement' rel='stylesheet' type='text/css'>
<div id="canvas-wrapper">
<canvas id="canvas" width="800" height="458"></canvas>
</div>
<div id="commands" ng-click="maybeLoadShape($event)">
<button type="button" class="mui-col-md-2 mui-btn mui-btn--accent" ng-click="addRect()">add</button>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<form action="" >
<div class="input-group control-group after-add-more">
<input type="text" name="addmore[]" class="form-control" placeholder="">
<div class="input-group-btn">
<button class="btn btn-success add-more" type="button"><i class="glyphicon glyphicon-plus"></i> add</button>
</div>
</div>
</form>
<div class="copy-fields hide">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" name="addmore[]" class="form-control" placeholder="">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> remove</button>
</div>
</div>
</div>
</div>
</div>
</div>
<textarea bind-value-to="rect" style="resize:none;" ></textarea>
<textarea bind-value-to="trimLine" style="resize:none;" ></textarea>
</div>
</div>
<hr>
</div>
<script src="http://fabricjs.com/lib/font_definitions.js"></script>
<script>
var kitchensink = { };
var canvas = new fabric.Canvas('canvas');
var canvas2 = new fabric.Canvas('canvas2');
</script>
<script type="text/javascript">
$(document).ready(function() {
//here first get the contents of the div with name class copy-fields and add it to after "after-add-more" div class.
$(".add-more").click(function(){
var html = $(".copy-fields").html();
$(".after-add-more").after(html);
});
//here it will remove the current value of the remove button which has been pressed
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
</script>
<script src="http://fabricjs.com/js/kitchensink/utils.js"></script>
<script src="http://fabricjs.com/js/kitchensink/app_config.js"></script>
<script src="http://fabricjs.com/js/kitchensink/controller.js"></script>
<script>
var consoleJSONValue = (
'{"version":"2.3.1","objects":[]}'
);
var rect = new fabric.Rect({
lockScalingX: true,
lockScalingY: true,
left: 339,
top: 40,
fill: 'red',
width: 12,
height: 82,
angle: 0
});
rect.toObject = function() {
return {
name: 'trimline',
items: [ "Ford", "BMW", "Fiat" ],
};
};
canvas.add(rect);
var rect = new fabric.Rect({
lockScalingX: true,
lockScalingY: true,
left: 366,
top: 40,
fill: 'red',
width: 12,
height: 82,
angle: 0
});
canvas.add(rect);
</script>
<script>
(function() {
function renderVieportBorders() {
var ctx = canvas.getContext();
ctx.save();
ctx.fillRect(
canvas.viewportTransform[4],
canvas.viewportTransform[5],
canvas.getWidth() * canvas.getZoom(),
canvas.getHeight() * canvas.getZoom());
ctx.setLineDash([5, 5]);
ctx.strokeRect(
canvas.viewportTransform[4],
canvas.viewportTransform[5],
canvas.getWidth() * canvas.getZoom(),
canvas.getHeight() * canvas.getZoom());
ctx.restore();
}
canvas.on('object:selected', function(opt) {
var target = opt.target;
if (target._cacheCanvas) {
}
})
canvas.on('mouse:wheel', function(opt) {
var e = opt.e;
if (!e.ctrlKey) {
return;
}
var newZoom = canvas.getZoom() + e.deltaY / 300;
canvas.zoomToPoint({ x: e.offsetX, y: e.offsetY }, newZoom);
renderVieportBorders();
e.preventDefault();
return false;
});
var viewportLeft = 0,
viewportTop = 0,
mouseLeft,
mouseTop,
_drawSelection = canvas._drawSelection,
isDown = false;
canvas.on('mouse:down', function(options) {
if (options.e.altKey) {
isDown = true;
viewportLeft = canvas.viewportTransform[4];
viewportTop = canvas.viewportTransform[5];
mouseLeft = options.e.x;
mouseTop = options.e.y;
_drawSelection = canvas._drawSelection;
canvas._drawSelection = function(){ };
renderVieportBorders();
}
});
canvas.on('mouse:move', function(options) {
if (options.e.altKey && isDown) {
var currentMouseLeft = options.e.x;
var currentMouseTop = options.e.y;
var deltaLeft = currentMouseLeft - mouseLeft,
deltaTop = currentMouseTop - mouseTop;
canvas.viewportTransform[4] = viewportLeft + deltaLeft;
canvas.viewportTransform[5] = viewportTop + deltaTop;
canvas.renderAll();
renderVieportBorders();
}
});
canvas.on('mouse:up', function() {
canvas._drawSelection = _drawSelection;
isDown = false;
});
})();
</script>
</div>
<script>
(function(){
var mainScriptEl = document.getElementById('main');
if (!mainScriptEl) return;
var preEl = document.createElement('pre');
var codeEl = document.createElement('code');
codeEl.innerHTML = mainScriptEl.innerHTML;
codeEl.className = 'language-javascript';
preEl.appendChild(codeEl);
document.getElementById('bd-wrapper').appendChild(preEl);
})();
</script>
<script>
(function() {
fabric.util.addListener(fabric.window, 'load', function() {
var canvas = this.__canvas || this.canvas,
canvases = this.__canvases || this.canvases;
canvas && canvas.calcOffset && canvas.calcOffset();
if (canvases && canvases.length) {
for (var i = 0, len = canvases.length; i < len; i++) {
canvases[i].calcOffset();
}
}
});
})();
</script>
</div>
</div> </body>
</html>
{
"plnkr": {
"runtime": "system"
}
}
/* Add your styles here */
// Add your code here