Контекст:
У меня есть вариант использования, когда мне нужно получить старый холст из стека и назначить его текущему активному холсту в dom. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что свойства холста (например, backgroundColor, высота и т. д.) заменяются и отображаются правильно, но в случае объектов на холсте свойства и события выглядят так, как будто они заменяются, но не отображаются в активном холст(ДОМ).
Примечание. У меня нет возможности использовать здесь отмену/повтор выполнения ткани.
Я попытался воссоздать проблему во фрагменте, где я пытаюсь сделать следующее.
Шаг 1: я создаю холст и объекты со свойствами по умолчанию, используя метод addTextBox, после применения свойств по умолчанию я сохраняю объект холста и текстового поля в переменной, называемой состоянием для резервного копирования.
Шаг 2:
при нажатии AddHelloText (кнопке) я нажимаю состояние, которое было записано на предыдущем шаге, в стек отмены.
После этого я назначаю приветствие текстовому полю и меняю цвет фона на красный.
Шаг 3: при нажатии кнопки отмены (кнопка) я получаю canvasOb из undoStack и назначаю i холсту (активному холсту).
На этом шаге, когда я делаю отмену, значения/события на холсте должны относиться к резервному холсту, который был сохранен в стеке отмены, но вместо этого он имеет неверные значения. Простыми словами, фон холста должен быть синим, а объект текстового поля должен иметь текст по умолчанию, даже когда я нажимаю на текстовое поле, он должен иметь синий фон и текст как текст по умолчанию.
Это две проблемы, с которыми я сталкиваюсь в настоящее время.
Обновляется только фон, а текстовый объект остается прежним.
При нажатии на ограничивающую рамку (текстовое поле) отображается другой экземпляр холста (тот, который имеет значения шага 2).
Не уверен, как именно мне следует действовать дальше.
Любые предложения будут действительно полезны.
var canvas = new fabric.Canvas("c");
var t1 = null;
var state = {};
const addTextBox=(canvasParam)=>{
t1 = new fabric.Textbox('Default text', {
width: 100,
top: 5,
left: 5,
fontSize: 16,
textAlign: 'center',
fill: '#ffffff',
});
canvas.on('selected', () => {
canvas.clearContext(canvas.contextTop);
});
canvas.setBackgroundColor('blue');
canvas.add(t1);
state={id:1,canvasOb:canvas,t1Backup:t1};
}
addTextBox(canvas);
var undoStack =[];
//Update the text to hello and change canvas background to red
$('#addHello').on('click', function() {
undoStack.push({state:_.cloneDeep(state)})
canvas.setBackgroundColor('red');
t1.text="hello red"
canvas.renderAll();
})
//apply previous canvas stored in the stack
$('#undo').on('click', function() {
console.log("TextBox value stored in undo stack: ",undoStack[0].state.canvasOb.getObjects()[0].text);
console.log("TextBox value stored in undo stack: ",undoStack[0].state.t1Backup.text);
canvas = undoStack[0].state.canvasOb;
console.log("Textbox value that should be displayed currently instead of 'hello red':",canvas.getObjects()[0].text);
canvas.renderAll();
})body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
width: 100vw;
}
#c {
box-shadow: 0 0 20px 0px #9090908a;
border-radius: 1rem;
//padding:.5rem;
}
#app-container{
height: 30vh;
width: 30vw;
}<script src="https://unpkg.com/lodash@4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.1.0/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
<html><body><div id="app-container">
<canvas id="c" width="200" height="300"></canvas>
<button id="addHello" class="button">Add hello</button>
<button id="undo" class="button">Undo</button>
</div></body></html>
selection:createdи проверить, является ли объект тем, который вам нужен: fabricjs.com/events 16.12.2020