0
다중 페이지 환경에서 FabricJS를 사용하고 있습니다. 페이지 목록보기는 캔버스에서 뭔가가 변경되면 생성되는 미리보기 이미지를 사용해야합니다. 지금 우리는 몇 가지 오브젝트 관련 이벤트를 듣고이 같은 변화에 썸네일을 업데이트 :Fabric JS - 페이지 축소판을 동적으로 변경합니다.
canvas.on('object:modified', function (option) {
PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:moving', function (option) {
PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:over', function (option) {
PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:out', function (option) {
PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:removed', function (option) {
PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:rotating', function (option) {
PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('object:scaling', function (option) {
PagesControllerScope && PagesControllerScope.refreshSavePage();
});
canvas.on('path:created', function (option) {
PagesControllerScope && PagesControllerScope.refreshSavePage();
});
에 대한 모든 가능한 변화를 정의 할 필요없이 "일반적인"방법으로 이런 일을 실현하려 어떤 방법이 있나요 각 개체 또는 캔버스 자체?
그래서 기본적으로 캔버스에서 뭔가가 변경되거나 itsef (크기, 배경 등) 캔버스가 변경 될 때마다 "refreshSavePage()"함수를 호출하고 싶습니다.
나는 "After : render"를 사용하기를 바랬지 만 이것은 여러 번 해고 된 것이기 때문에 이것은 선택 사항이 아닙니다. 그것은 어떤 something is changed 이벤트가 아닌 하나의 시간 엄지 손가락
clearInterval(drawThumb);
drawThumb = setTimeout(function() {
// code for generate thumb
clearInterval(drawThumb);
}, 2000);
마우스를 움직여 '이동/종료/회전/비우기'중에 저장할 필요가 없습니다. '개체 : 수정 됨'이 실행되므로 그 시간 만 저장하십시오. – Durga
Durga에게 감사드립니다. 나는 "텍스트 : 변경됨", "텍스트 : 선택 : 변경됨", "대상 : 변경됨"등을 사용할 수 있다고 생각합니다. 그러나 캔버스 크기 또는 배경 변경 방법은 어때요? 또는 물건을 앞 뒤로 보낼 수 있습니다. 어떤 생각? –
배경을 변경하거나 크기를 조정할 때만 함수 내부에서 호출 할 수 있습니다. 이를 위해 이벤트가 발생하지 않습니다. – Durga