Ich habe eine Leinwand erstellt, wo Sie Text generieren und in meiner Leinwand anzeigen können.html5 Canvas Löschen Sie dauerhaft
POST-Taste und CLEAR-Taste funktioniert zunächst einwandfrei!
Das nächste Problem/Bug, den ich erfahre, ist, dass, wenn ich ein neues Wort eintippe und auf POST klicke, der vorherige "gelöschte" Buchstabe wieder erscheint.
function updateTotal(){
if (document.getElementById('design3').checked) {
var canvas2 = document.getElementById("displaycake_text");
context = canvas2.getContext("2d");
var $canvas2 = $("#displaycake_text");
var canvasOffset = $canvas2.offset();
var offsetX = canvasOffset.left;
var offsetY = canvasOffset.top;
var scrollX = $canvas2.scrollLeft();
var scrollY = $canvas2.scrollTop();
var startX;
var startY;
var texts = []; // an array to hold text objects
var selectedText = -1;// this var will hold the index of the hit-selected text
function draw() { // clear the canvas & redraw all texts
context.clearRect(0, 0, canvas2.width, canvas2.height);
for (var i = 0; i < texts.length; i++) { var text = texts[i];
context.fillText(text.text, text.x, text.y); }
}
function textHittest(x, y, textIndex) { // test if x,y is inside the bounding box of texts[textIndex]
var text = texts[textIndex];
return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);
}
function handleMouseDown(d) {
d.preventDefault();
startX = parseInt(d.clientX - offsetX);
startY = parseInt(d.clientY - offsetY);
for (var i = 0; i < texts.length; i++) {
if (textHittest(startX, startY, i)) {
selectedText = i; } }
}
function handleMouseUp(d) { // done dragging
d.preventDefault();
selectedText = -1; }
function handleMouseOut(d) { // also done dragging
d.preventDefault();
selectedText = -1; }
function handleMouseMove(d) {
if (selectedText < 0) { return; }
d.preventDefault();
mouseX = parseInt(d.clientX - offsetX);
mouseY = parseInt(d.clientY - offsetY);
var dx = mouseX - startX;
var dy = mouseY - startY;
startX = mouseX;
startY = mouseY;
var text = texts[selectedText];
text.x += dx;
text.y += dy;
draw(); }
$("#displaycake_text").mousedown(function (d) { handleMouseDown(d); }); // listen for mouse events
$("#displaycake_text").mousemove(function (d) { handleMouseMove(d); });
$("#displaycake_text").mouseup(function (d) { handleMouseUp(d); });
$("#displaycake_text").mouseout(function (d) { handleMouseOut(d); });
$("#text_dedi").click(function() {
var y = texts.length * 20 + 20; // calc the y coordinate for this text on the canvas
var text = { text: $("#dedi_text").val(),
x: 20,
y: y
};
context.font = "30px Roboto";
text.width = context.measureText(text.text).width;
text.height = 16;
text.color = "#ffffff";
texts.push(text); // put this new text in the texts array
draw(); // redraw everything
});
//this is the code for CLEAR BUTTON
document.getElementById('clear').addEventListener('click', function() {
context.clearRect(0, 0, canvas2.width, canvas2.height); texts = []; }, false);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- PLS CLICK THE RADIO BUTTON FIRST THEN INSERT & POST -->
<br> <input type="radio" id="design3" name="design_3" onchange="updateTotal()" />
<span class="radio-chosen"></span> Dedication
<h2>
<div class="disp_dedi off"> <input type="text" size="15" id="dedi_text" name="dedicationT" placeholder="Dedication">
<button id="text_dedi"> Post </button>
<input type="button" value="Clear" id="clear" size="23" onchange="updateTotal()"> </div>
<canvas id="displaycake_text" height="200px" width="400px" style="border-color: #fff; border-style: solid;"> </canvas>
Die Textfunktion fein als auch das Ziehen funktioniert (ich fand nur die Quelle davon) Aber meine CLEAR-Taste ist das Problem, zeigt es immer noch meinen gelöschten Text. Bitte, ich hoffe, dass mir jemand helfen kann. Ich danke dir sehr !
Ich sehe nirgends, wo die var-Texte auf ein leeres Array zurückgesetzt wird, könnte es ein Teil des Problems sein. Eine andere Sache, wenn Sie erwarten, dass es zurückgesetzt wird, weil die Variable an jedem 'updateTotal()' deklariert ist, müssen Sie berücksichtigen, dass die jQuery 'click'-Funktion die neue Handler-Funktion bei jedem Aufruf hinzufügt. Da Sie die Funktion niemals trennen, können mehrere Instanzen des Klicks ausgeführt werden. Vielleicht sollten Sie Ihren Ansatz überprüfen. Ich kann später eine Antwort ausarbeiten, wenn Sie noch Probleme haben .. – Kaddath
danke für Ihre Antwort, dies ist nicht für das Zurücksetzen meiner Leinwand in Betracht gezogen? 'document.getElementById ('clear'). addEventListener ('click', function() { context.clearRect (0, 0, canvas2.width, canvas2.height);}, false);' Ich denke, ich bekomme es ist aber nicht wirklich ... ich bin mir nicht sicher, wie es dann zu codieren ist ... – Khyana
tut es, aber IMO es füllt es entweder wieder mit dem vollständigen Array aller zuvor eingegebenen Texte, oder feuert mehrere Klick-gebundene Funktionen und Jeder schreibt den Text, den er zuvor gespeichert hat. Ich werde versuchen, eine Antwort zu posten, wenn ich später Zeit habe. – Kaddath