Project'dan alındıktan sonra düzenlenemez. Giriş alanına ve gömleğindeki yazıya yazdığınızda. Ardından "geri dön" düğmesine basın, bir dezavantajı var. Ardından "ön tarafa" basın ve girişe metin girin. Eski metin kaydedilir ve yeni üst üste bindirilir. Soru: Metnin çakıştığını ve daha önce tanıtılmış olanı nasıl düzenlediğini fark etmek nasıl? Yeni bir kumaş metin oluşturulduğunda loadFromJson aradığınızda loadFromJSON arayıp eski metin nesnesi size stringify tuval gelen # metin dizesi bağlantısını kaldırmak zamanNesne, json
var canvas;
var a;
var b;
var line1;
var line2;
var line3;
var line4;
$(document).ready(function() {
canvas = new fabric.Canvas('FrontCanvas');
$('#your-name').on('click', function() {
clearCanvas();
initTextString();
$('#text-string').val('Your name')
});
var textSample;
/*#text-string*/
$('#text-string').on('keyup', function() {
var text = $('#text-string').val();
var activeText = canvas.getActiveObject();
textSample = new fabric.Text(text, {
originX: 'left',
originY: 'top',
fontSize: 32,
fontFamily: 'MotorCyr',
angle: 0,
fontWeight: '',
hasControls: false,
hasBorders: true,
top: 50
});
canvas.setActiveObject(textSample);
canvas.remove(activeText);
canvas.renderAll();
canvas.add(textSample);
canvas.centerObjectH(textSample);
$('#position').show();
$("#removePrint").show();
if(document.getElementById('text-string').value.replace(/\s+/g, '').length < 1) {
$('#position').hide();
$("#removePrint").hide();
}
});
/*#text-string*/
function initTextString() {
var text = $('#text-string').val();
textSample = new fabric.Text(text, {
originX: 'left',
originY: 'top',
fontSize: 32,
fontFamily: 'MotorCyr',
angle: 0,
fontWeight: '',
hasControls: false,
hasBorders: true,
top: 50
});
canvas.setActiveObject(textSample);
canvas.renderAll();
canvas.add(textSample);
canvas.centerObjectH(textSample);
$('#position').show();
$("#removePrint").show();
if(document.getElementById('text-string').value.replace(/\s+/g, '').length < 1) {
$('#position').hide();
$("#removePrint").hide();
}
}
document.getElementById("text-string").addEventListener("focusout", deactivateAll);
document.getElementById("text-string").addEventListener("focus", focusText);
function deactivateAll() {
canvas.deactivateAllWithDispatch();
}
function focusText() {
if(textSample != undefined) {
canvas.setActiveObject(textSample)
}
}
$('#removePrint').on({
click: function() {
clearCanvas();
$("#text-string").val("");
$("#number-string").val("");
$('#removePrint').hide();
$('#position').hide();
}
});
$(".printArea").hover(
function() {
canvas.add(line1);
canvas.add(line2);
canvas.add(line3);
canvas.add(line4);
canvas.renderAll();
},
function() {
canvas.remove(line1);
canvas.remove(line2);
canvas.remove(line3);
canvas.remove(line4);
canvas.renderAll();
}
);
$('#flip').click(function() {
if ($(this).attr("data-title") == "Показать вид сзади") {
var backSRC = $('#mainCanvas img').attr('data-back');
console.log(backSRC);
$(this).attr('data-title', 'Показать вид спереди');
$(this).text('See front');
$("#mainCanvas img").attr("src",backSRC);
a = JSON.stringify(canvas);
canvas.clear();
try
{
var json = JSON.parse(b);
canvas.loadFromJSON(b);
canvas.loadFromJSON(b, function() {
canvas.renderAll();
console.log(canvas.item(0).name);
});
}
catch(e)
{
console.log(e.name);
console.log(e.message);
}
} else {
var frontSRC = $('#mainCanvas img').attr('data-front');
console.log(frontSRC);
$(this).attr('data-title', 'Показать вид сзади');
$(this).text('See back');
$("#mainCanvas img").attr("src",frontSRC);
b = JSON.stringify(canvas);
canvas.clear();
try
{
var json = JSON.parse(a);
canvas.loadFromJSON(a, function() {
canvas.renderAll();
console.log(canvas.item(0).name);
});
}
catch(e)
{
console.log(e.name);
console.log(e.message);
}
}
canvas.renderAll();
setTimeout(function() {
canvas.calcOffset();
},200);
});
line1 = new fabric.Line([0,0,200,0], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
line2 = new fabric.Line([199,0,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
line3 = new fabric.Line([0,0,0,400], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
line4 = new fabric.Line([0,400,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
});//doc ready
function clearCanvas() {
canvas.clear().renderAll();
}
doğrudan yazabilirsiniz bir itext nesneyi vardır, ama bu bana yardım etmedi. –
Bunu uygulamamıştım, sadece –
'u nerede değiştireceğimi gösterdim https://jsfiddle.net/kenneb/zpo9aj7n/ adresini burada uygularım ama kodunuz işe yaramadı –