전체 캔버스를 지우지 않고 기능을 대체 하시겠습니까?

모든 텍스트를 지우지 않고 텍스트를 함수로 대체하려고합니다. 지금은 함수를 대체 할 수 있지만 전체 캔버스 만 지워야합니다. 세 번째 함수 (예를 들어)가 남아 있도록 조금 더 역동적 이길 바랍니다.전체 캔버스를 지우지 않고 기능을 대체 하시겠습니까?

내가 지금까지 가지고있는 것은 다음과 같습니다. 원본 텍스트가 지워지는주의 : 사전에

var $ = function(id) { 
 
    return document.getElementById(id) 
 
}; 
 

 
var canvas = this.__canvas = new fabric.Canvas('c'); 
 
canvas.setHeight(300); 
 
canvas.setWidth(500); 
 
    
 
function textOne() { 
 
    canvas.clear(); 
 
    canvas.add(new fabric.IText('One', { 
 
    left: 50, 
 
    top: 100, 
 
    fontFamily: 'arial', 
 
    fill: '#333', 
 
    fontSize: 50 
 
    })); 
 
} 
 
    
 
// Text that should stay 
 
canvas.add(new fabric.IText('This Should Stay The Same\nEdited Or Not', { 
 
    left: 300, 
 
    top: 45, 
 
    fontFamily: 'Monsieur La Doulaise', 
 
    fontSize: 27, 
 
    hasBorders: false, 
 
    hasControls: false, 
 
    selectable: true, 
 
    lockRotation: true, 
 
    lockMovementX: true, 
 
    lockMovementY: true, 
 
    align: 'mid', 
 
    originX: 'center', 
 
    originY: 'center', 
 
    centeredScaling: true, 
 
})); 
 

 
function textTwo() { 
 
    canvas.clear(); 
 
    canvas.add(new fabric.IText('Two', { 
 
    left: 200, 
 
    top: 100, 
 
    fontFamily: 'arial black', 
 
    fill: '#333', 
 
    fontSize: 50 
 
    })); 
 
}

canvas { 
 
    border: 1px solid #dddddd; 
 
    border-radius: 3px; 
 
    margin-top: 5px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<button onclick="textOne()">One</button> 
 
<button onclick="textTwo()">Two</button> 
 
<canvas id="c"></canvas>

감사합니다!

출처

2017-10-29 code forever

가능한 중복 https://stackoverflow.com/questions/18864487/change-text-once-it-is-added- 캔버스에) – juliobetta

나는 그렇게 생각하지 않는다. –

예. 그것은! 나는 그 질문에 대한 답을 알고 있습니다. – juliobetta

캔버스 내부에 빈 텍스트를 추가하고 해당 기능 내에서 업데이트하면됩니다. 업데이트 후에 canvas.renderAll을 실행하십시오. 참고로, 나는 fabric.js와의 경험이 0입니다.

var $ = function(id) { 
 
    return document.getElementById(id) 
 
}; 
 

 
var canvas = this.__canvas = new fabric.Canvas('c'); 
 
canvas.setHeight(300); 
 
canvas.setWidth(500); 
 
    
 
var dynamicText = new fabric.IText('', { 
 
    left: 50, 
 
    top: 100, 
 
    fontFamily: 'arial', 
 
    fill: '#333', 
 
    fontSize: 50 
 
}) 
 
    
 
canvas.add(dynamicText); 
 
    
 
function textOne() { 
 
    dynamicText.setText('ONE'); 
 
    canvas.renderAll(); 
 
} 
 
    
 
// Text that should stay 
 
canvas.add(new fabric.IText('This Should Stay The Same\nEdited Or Not', { 
 
    left: 300, 
 
    top: 45, 
 
    fontFamily: 'Monsieur La Doulaise', 
 
    fontSize: 27, 
 
    hasBorders: false, 
 
    hasControls: false, 
 
    selectable: true, 
 
    lockRotation: true, 
 
    lockMovementX: true, 
 
    lockMovementY: true, 
 
    align: 'mid', 
 
    originX: 'center', 
 
    originY: 'center', 
 
    centeredScaling: true, 
 
})); 
 

 
function textTwo() { 
 
    dynamicText.setText('TWO'); 
 
    canvas.renderAll(); 
 
}

canvas { 
 
    border: 1px solid #dddddd; 
 
    border-radius: 3px; 
 
    margin-top: 5px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<button onclick="textOne()">One</button> 
 
<button onclick="textTwo()">Two</button> 
 
<canvas id="c"></canvas>

[가 캔버스에 추가되면 변경 텍스트] (의

출처

2017-10-29 03:30:45 juliobetta

전체 캔버스를 지우지 않고 기능을 대체 하시겠습니까?

답변

관련 문제