WebFontConfig = {
google: { families: [ 'Ceviche+One::latin,latin-ext','Mr+Dafoe::latin','Shadows+Into+Light+Two::latin,latin-ext'] }
};
(function() {
var wf = document.createElement('script');
wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})();
var canvas = new fabric.Canvas('c');
if( window.devicePixelRatio !== 1 ){
var c = canvas.getElement(), w = c.width, h = c.height;
// Scale the canvas up by two for retina
c.setAttribute('width', w*window.devicePixelRatio);
c.setAttribute('height', h*window.devicePixelRatio);
// finally set the scale of the context
c.getContext('2d').scale(window.devicePixelRatio, window.devicePixelRatio);
}
var btn2 = document.getElementById('inline-btn'),btnHeight = 18;
// canvas.backgroundColor = 'transparent';
// var recx2 = new fabric.Rect({
// lockMovementX: true,
// lockMovementY: true,
// selectable:false,
// top: 325,
// left: 789,
// fill: '#FEF3EE',
// width: 420,
// height: 711
// });
// recx2.set({
// clipFor: 'pig'
// });
// canvas.add(recx2);
// var recx3 = new fabric.Rect({
// lockMovementX: true,
// lockMovementY: true,
// selectable:false,
// originX: 'left',
// originY: 'top',
// top: 327,
// left: 77,
// width: 423,
// fill: 'transparent',
// height: 708,
// strokeWidth: 0
// });
// recx3.set({
// clipFor: 'pug'
// });
// canvas.add(recx3);
// background
// var imgElement5 = document.getElementById('layer1');
// var imgInstance5 = new fabric.Image(imgElement5, {
// left: 0,
// top: 0,
// lockMovementX: true,
// lockMovementY: true,
// selectable:false,
// angle: 0,
// opacity: 1
// });
// canvas.add(imgInstance5);
var circle = new fabric.Circle({
left: '305',
top: '275',
radius: 200,
strokeWidth: 0,
stroke: 'white',
originX: 'center',
originY: 'center'
});
circle.setGradient('fill', {
x1: '0',
y1: -circle.height/10,
x2: '0',
y2: circle.height,
colorStops: { '0': '#422424', '1': '#422424'}
});
canvas.add(circle);
console.log('Gradient', circle.fill);
canvas.sendToBack(circle);
//logo
var imgElement2 = document.getElementById('layer2');
var imgInstance2 = new fabric.Image(imgElement2, {
left: 240,
top: 135,
width:128,
height:36,
angle: 0,
opacity: 1
});
canvas.add(imgInstance2);
var text1 = new fabric.Text('CHOCK', {
left: 133,
top: 215,
fill: '#F6DDC6',
zindex: 2,
fontSize: 90,
fontFamily: 'arial',
fontWeight: 'bold'
});
canvas.add(text1);
var text2 = new fabric.Text('Kacang Cokelat Asli Indonesia', {
left: 133,
top: 300,
fill: 'white',
zindex: 2,
fontSize: 25,
fontFamily: 'arial',
});
canvas.add(text2);
var text3 = new fabric.Text('PT TAMA COKELAT', {
left: 215,
top: 495,
fill: '#32160F',
zindex: 2,
fontSize: 20,
fontFamily: 'arial',
fontWeight: 'bold'
});
canvas.add(text3);
// var recx = new fabric.Rect({
// lockMovementX: true,
// lockMovementY: true,
// selectable:false,
// top: 0,
// left: 0,
// zindex:0,
// width: 638,
// height: 1004 });
// recx.setGradient('fill', {
// x1: '0',
// y1: -recx.height/10,
// x2: '0',
// y2: recx.height,
// colorStops: { '0': '#5C5C4A', '1': '#383838'}
// });
// canvas.add(recx);
// console.log('Gradient', recx.fill);
// canvas.sendToBack(recx);
//update warna
function update(jscolor) {
var obj = canvas.getActiveObject();
if (!obj) return;
// 'jscolor' instance can be used as a string
obj.setFill('#' + jscolor);
canvas.setActiveObject(obj);
}
$('#btn_save').click(function(){
var trsvg = canvas.toSVG();
$('#svg-tag').html(trsvg);
var locfile = new Blob([trsvg], {type: "image/svg+xml;charset=utf-8"});
var locfilesrc = URL.createObjectURL(locfile);//mylocfile);
var dwn = document.getElementById('download');
dwn.innerHTML = "Download";
});
// delete object
function handleRemove() {
if(canvas.getActiveGroup()){
canvas.getActiveGroup().forEachObject(function(o){ canvas.remove(o) });
canvas.discardActiveGroup().renderAll();
} else {
canvas.remove(canvas.getActiveObject());
canvas.renderAll();
}
}
canvas.on('object:selected', function(o) {
if (o.target.isType('image')) {
$('#inline-btn').show();
$('#panel-text').hide();
}else if (o.target.isType('text')) {
$('#panel-text').show();
$('#inline-btn').hide();
}else if (o.target.isType('group')){
$('#inline-btn').show();
$('#panel-text').hide();
}else{
$('#inline-btn').hide();
$('#panel-text').hide();
};
});
canvas.on('selection:cleared', function() {
$('#inline-btn').hide();
$('#panel-text').hide();
});
/*fabric.Image.fromURL('buah4.png', function(img) {
canvas.add(img.set({ left: 0, top: 0}).scale(0.25));
img.on('moving', function() { positionBtn(img) });
positionBtn(img);
});*/
$('input[name="my-radio"]').on('change', function(e) {
var hit=e.target.value;
if (hit==null || hit=='0'){
$('#panel_edit').hide();
hit=0;
}else if (hit=='1'){
$('#panel_edit').show();
$('#panel_edit_2').hide();
$('#panel_edit_3').hide();
}else if (hit=='2'){
$('#panel_edit').hide();
$('#panel_edit_2').show();
$('#panel_edit_3').hide();
hit=e.target.value;
}else if (hit=='3'){
$('#panel_edit').hide();
$('#panel_edit_2').hide();
$('#panel_edit_3').show();
hit=e.target.value;
}
//Judul
document.getElementById(eval("'judul'+hit")).addEventListener('input', function (e) {
eval("text"+hit).setText(e.target.value);
canvas.setActiveObject(eval("text" + hit));
canvas.renderAll();
});
document.getElementById(eval("'judul_size'+hit")).addEventListener('input', function (e) {
eval("text" + hit).set('fontSize',e.target.value);
canvas.setActiveObject(eval("text" + hit));
eval("text" + hit + hit).set('fontSize',e.target.value);
eval("text" + hit + hit + hit).set('fontSize',e.target.value);
canvas.renderAll();
});
document.getElementById(eval("'judul_rotasi'+hit")).addEventListener('input', function (e) {
eval("text" + hit).set('angle',e.target.value);
canvas.setActiveObject(eval("text" + hit));
eval("text" + hit + hit).setCoords();
eval("text" + hit + hit).set('angle',e.target.value);
eval("text" + hit + hit + hit).set('angle',e.target.value);
canvas.renderAll();
});
document.getElementById(eval("'judul_font'+hit")).addEventListener('input', function (e) {
eval("text" + hit).set('fontFamily',e.target.value);
canvas.setActiveObject(eval("text" + hit));
eval("text" + hit + hit).set('fontFamily',e.target.value);
eval("text" + hit + hit + hit).set('fontFamily',e.target.value);
canvas.renderAll();
});
document.getElementById(eval("'warni'+hit")).addEventListener('change', function (e) {
eval("text" + hit).setFill('#' + e.target.value);
canvas.setActiveObject(eval("text" + hit));
eval("text" + hit + hit).setFill('#' + e.target.value);
eval("text" + hit + hit + hit).setFill('#' + e.target.value);
canvas.setActiveObject(eval("text" + hit));
});
//bold
document.getElementById(eval("'bolder'+hit")).addEventListener('click', function (e) {
eval("text" + hit).set('fontWeight','bold');
eval("text" + hit + hit).set('fontWeight','bold');
eval("text" + hit + hit + hit).set('fontWeight','bold');
canvas.renderAll();
});
//italic
document.getElementById(eval("'italicer'+hit")).addEventListener('click', function (e) {
eval("text" + hit).set('fontStyle','italic');
eval("text" + hit + hit).set('fontStyle','italic');
eval("text" + hit + hit + hit).set('fontStyle','italic');
canvas.renderAll();
});
//underline
document.getElementById(eval("'underliner'+hit")).addEventListener('click', function (e) {
eval("text" + hit).set('textDecoration','underline');
eval("text" + hit + hit).set('textDecoration','underline');
eval("text" + hit + hit + hit).set('textDecoration','underline');
canvas.renderAll();
});
});
document.getElementById('gradient1').addEventListener('change', function (e) {
circle.setGradient('fill', {
x1: '0',
y1: -circle.height/10,
x2: '0',
y2: circle.height,
colorStops: { '0': '#' + e.target.value, '1': $("#gradient2").val()}
});
console.log('Gradient', circle.fill);
canvas.renderAll();
});
document.getElementById('gradient2').addEventListener('change', function (e) {
circle.setGradient('fill', {
x1: '0',
y1: -circle.height/10,
x2: '0',
y2: circle.height,
colorStops: { '1': '#' + e.target.value, '0': $("#gradient1").val()}
});
console.log('Gradient', circle.fill);
canvas.renderAll();
});
document.getElementById('flat_background').addEventListener('change', function (e) {
circle.setFill('#' + e.target.value);
canvas.renderAll();
});
// Size Objek
document.getElementById('ukuran').addEventListener('input', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.set('fontSize',e.target.value);
canvas.renderAll();
});
//Rotasi Objek
document.getElementById('rotasi').addEventListener('input', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.set('angle',e.target.value);
canvas.renderAll();
});
//Rotasi Text
document.getElementById('rotasi2').addEventListener('input', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.set('angle',e.target.value);
canvas.renderAll();
});
// Bring to Back Text
document.getElementById('posisi2').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.bringToFront();
canvas.renderAll();
});
// Bring to Back
document.getElementById('posisi').addEventListener('click', function (e) {
var obj = canvas.getActiveObject();
if (!obj) return;
obj.bringToFront();
canvas.renderAll();
});
// ganti logo
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
var element5 = document.getElementById("layer2");
element5.src = data;
canvas.setActiveObject(imgInstance3);
};
reader.readAsDataURL(file);
});
//tambah s
document.getElementById('file_costum').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
console.log("reader " + reader);
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 70, top: 100, scaleToWidth:1,scaleToHeight:1, angle: 0}).scale(0.5);
canvas.add(oImg).renderAll();
img.on('moving'/*, function() { positionBtn(img) }*/);
/*positionBtn(img);*/
canvas.setActiveObject(oImg);
});
};
reader.readAsDataURL(file);
});
$("#canvas2png").click(function(){
if(!window.localStorage){alert("This function is not supported by your browser."); return;}
// to PNG
// window.open(canvas.toDataURL('png'));
var cvs_png = canvas.toDataURL('png');
var dwn = document.getElementById('download');
dwn.innerHTML = "Download";
});
function loadSVG(id) {
var elem = document.getElementById(id),
svgStr = elem.innerHTML;
fabric.loadSVGFromString(svgStr, function(objects, options) {
// Group elements to fabric.PathGroup (more than 1 elements) or
// to fabric.Path
var loadedObject = fabric.util.groupSVGElements(objects, options);
// Set sourcePath
loadedObject.set('sourcePath', elem.getAttribute('data-url'));
canvas.add(loadedObject);
loadedObject.center().setCoords();
canvas.renderAll();
});
};
$('#jjson').click(function(){
var group = [];
fabric.loadSVGFromURL("scoba_packager.svg",function(objects,options){
var loadedObjects = new fabric.Group(group);
loadedObjects.set({
scaleX:1,
});
canvas.add(loadedObjects);
canvas.renderAll();
},function(item, object){
object.set('id', item.getAttribute('id'));
group.push(object);
});
});
this.__canvases.puhs(canvas);
function getPOS() {
var pos = canvas.getActiveObject().get('left');
var pos2= canvas.getActiveObject().get('top');
var pos3= canvas.getActiveObject().getHeight('height');
var pos4 = canvas.getActiveObject().getWidth('width');
var pos5 = canvas.getActiveObject().get('angle');
alert("Position of rect from left:" + pos + "top "+ pos2+"height "+pos3+"width "+pos4+"Angle "+pos5);
}