No puede arrastrar y soltar el texto en la imagen de lienzo -- javascript campo con jquery campo con html campo con html5-canvas camp Relacionados El problema

Not Able to drag and drop the text in canvas image


1
vote

problema

Español

En realidad, he intentado arrastrar y soltar el texto de lienzo que se creó en JavaScript. Pero no puedo arrastrarlo correctamente porque la selección del texto no funciona correctamente. Mantuve mi código en debajo del fragmento.

por favor ayúdame en esto. Gracias de antemano.

  var canvas = document.getElementById("canvas");  var ctx = canvas.getContext("2d");    // variables used to get mouse position on the canvas  var $canvas = $("#canvas");  var canvasOffset = $canvas.offset();  var offsetX = canvasOffset.left;  var offsetY = canvasOffset.top;  var scrollX = $canvas.scrollLeft();  var scrollY = $canvas.scrollTop();    // variables to save last mouse position  // used to see how far the user dragged the mouse  // and then move the text by that distance  var startX;  var startY;    // an array to hold text objects  var texts = [];    // this var will hold the index of the hit-selected text  var selectedText = -1;    // clear the canvas & redraw all texts  function draw() {      ctx.clearRect(0, 0, canvas.width, canvas.height);      ctx.drawImage(window.imageSrc, 0, 0, canvas.width, canvas.height);      for (var i = 0; i < texts.length; i++) {          var text = texts[i];    ctx.strokeText(text.text, text.x, text.y);          ctx.fillText(text.text, text.x, text.y);      }  }    // test if x,y is inside the bounding box of texts[textIndex]  function textHittest(x, y, textIndex) {      var text = texts[textIndex];      return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);  }    // handle mousedown events  // iterate through texts[] and see if the user  // mousedown'ed on one of them  // If yes, set the selectedText to the index of that text  function handleMouseDown(e) {      e.preventDefault();      startX = parseInt(e.clientX - offsetX);      startY = parseInt(e.clientY - offsetY);      // Put your mousedown stuff here      //alert(texts.length);            for (var i = 0; i < texts.length; i++) {          if (textHittest(startX, startY, i)) {              selectedText = i;          }      }  }    // done dragging  function handleMouseUp(e) {      e.preventDefault();      selectedText = -1;  }    // also done dragging  function handleMouseOut(e) {      e.preventDefault();      selectedText = -1;  }    // handle mousemove events  // calc how far the mouse has been dragged since  // the last mousemove event and move the selected text  // by that distance  function handleMouseMove(e) {      if (selectedText < 0) {          return;      }      e.preventDefault();      mouseX = parseInt(e.clientX - offsetX);      mouseY = parseInt(e.clientY - offsetY);        // Put your mousemove stuff here      var dx = mouseX - startX;      var dy = mouseY - startY;      startX = mouseX;      startY = mouseY;        var text = texts[selectedText];      text.x += dx;      text.y += dy;      draw();  }    // listen for mouse events  $("#canvas").mousedown(function (e) {      handleMouseDown(e);  });  $("#canvas").mousemove(function (e) {      handleMouseMove(e);  });  $("#canvas").mouseup(function (e) {      handleMouseUp(e);  });  $("#canvas").mouseout(function (e) {      handleMouseOut(e);  });    $("[id^='memeText']").change(function () {      // calc the y coordinate for this text on the canvas      var y = texts.length * 20 + 100;    var position = $(this).attr('name');            position = position - 1;      // get the text from the input element      var text = {          text: $(this).val(),          x: 250,          y: y      };        // calc the size of this text for hit-testing purposes      ctx.font = "32px verdana";      ctx.textAlign = 'center';   ctx.lineWidth = 3;   ctx.fillStyle = "#fff";   ctx.strokeStyle = "#000";      text.width = ctx.measureText(text.text).width;      text.height = 16;    if(texts[position]==""||texts[position]==null||texts[position]==undefined){       texts.push(text);      } else {       console.log(texts[position].text);       texts[position].text = $(this).val();      }      // put this new text in the texts array              // redraw everything      draw();    });    function handleFileSelect(evt) {        //var canvasWidth = 500;       // var canvasHeight = 500;        var file = evt.target.files[0];        var reader = new FileReader();        reader.onload = function(fileObject) {         var data = fileObject.target.result;         var image = new Image();         image.onload = function() {          window.imageSrc = this;          ctx.drawImage(window.imageSrc, 0, 0, canvas.width, canvas.height);           };         document.getElementById('box2').style.display = "block";         image.src = data;         // console.log(fileObject.target.result);        };        reader.readAsDataURL(file);       }                        document.getElementById('file').addEventListener('change',         handleFileSelect, false);  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="box1" style="">                   <input id="file" type="file" autocomplete="off">          <br><br>      </div>            <div id="box2" style="display: none;">                    <input id="memeText" name="1" autocomplete="off">          <br><br>          <input id="memeText" name="2" autocomplete="off">          <br><br>          <canvas id="canvas" width="500" height="500"></canvas>          <br><br>          <a class="buttonLink" id="downloadLink">Download Meme!</a>          <br><br>          <a href="">Make Another Meme!</a>      </div>  
Original en ingles

Actually i have tried to drag and drop the canvas text which was created in javascript . But I am not able to drag it properly because selecting the text is not working properly. I kept my code in below snippet.

please help me on this. Thanks in advance.

var canvas = document.getElementById("canvas");  var ctx = canvas.getContext("2d");    // variables used to get mouse position on the canvas  var $canvas = $("#canvas");  var canvasOffset = $canvas.offset();  var offsetX = canvasOffset.left;  var offsetY = canvasOffset.top;  var scrollX = $canvas.scrollLeft();  var scrollY = $canvas.scrollTop();    // variables to save last mouse position  // used to see how far the user dragged the mouse  // and then move the text by that distance  var startX;  var startY;    // an array to hold text objects  var texts = [];    // this var will hold the index of the hit-selected text  var selectedText = -1;    // clear the canvas & redraw all texts  function draw() {      ctx.clearRect(0, 0, canvas.width, canvas.height);      ctx.drawImage(window.imageSrc, 0, 0, canvas.width, canvas.height);      for (var i = 0; i < texts.length; i++) {          var text = texts[i];    ctx.strokeText(text.text, text.x, text.y);          ctx.fillText(text.text, text.x, text.y);      }  }    // test if x,y is inside the bounding box of texts[textIndex]  function textHittest(x, y, textIndex) {      var text = texts[textIndex];      return (x >= text.x && x <= text.x + text.width && y >= text.y - text.height && y <= text.y);  }    // handle mousedown events  // iterate through texts[] and see if the user  // mousedown'ed on one of them  // If yes, set the selectedText to the index of that text  function handleMouseDown(e) {      e.preventDefault();      startX = parseInt(e.clientX - offsetX);      startY = parseInt(e.clientY - offsetY);      // Put your mousedown stuff here      //alert(texts.length);            for (var i = 0; i < texts.length; i++) {          if (textHittest(startX, startY, i)) {              selectedText = i;          }      }  }    // done dragging  function handleMouseUp(e) {      e.preventDefault();      selectedText = -1;  }    // also done dragging  function handleMouseOut(e) {      e.preventDefault();      selectedText = -1;  }    // handle mousemove events  // calc how far the mouse has been dragged since  // the last mousemove event and move the selected text  // by that distance  function handleMouseMove(e) {      if (selectedText < 0) {          return;      }      e.preventDefault();      mouseX = parseInt(e.clientX - offsetX);      mouseY = parseInt(e.clientY - offsetY);        // Put your mousemove stuff here      var dx = mouseX - startX;      var dy = mouseY - startY;      startX = mouseX;      startY = mouseY;        var text = texts[selectedText];      text.x += dx;      text.y += dy;      draw();  }    // listen for mouse events  $("#canvas").mousedown(function (e) {      handleMouseDown(e);  });  $("#canvas").mousemove(function (e) {      handleMouseMove(e);  });  $("#canvas").mouseup(function (e) {      handleMouseUp(e);  });  $("#canvas").mouseout(function (e) {      handleMouseOut(e);  });    $("[id^='memeText']").change(function () {      // calc the y coordinate for this text on the canvas      var y = texts.length * 20 + 100;    var position = $(this).attr('name');            position = position - 1;      // get the text from the input element      var text = {          text: $(this).val(),          x: 250,          y: y      };        // calc the size of this text for hit-testing purposes      ctx.font = "32px verdana";      ctx.textAlign = 'center';   ctx.lineWidth = 3;   ctx.fillStyle = "#fff";   ctx.strokeStyle = "#000";      text.width = ctx.measureText(text.text).width;      text.height = 16;    if(texts[position]==""||texts[position]==null||texts[position]==undefined){       texts.push(text);      } else {       console.log(texts[position].text);       texts[position].text = $(this).val();      }      // put this new text in the texts array              // redraw everything      draw();    });    function handleFileSelect(evt) {        //var canvasWidth = 500;       // var canvasHeight = 500;        var file = evt.target.files[0];        var reader = new FileReader();        reader.onload = function(fileObject) {         var data = fileObject.target.result;         var image = new Image();         image.onload = function() {          window.imageSrc = this;          ctx.drawImage(window.imageSrc, 0, 0, canvas.width, canvas.height);           };         document.getElementById('box2').style.display = "block";         image.src = data;         // console.log(fileObject.target.result);        };        reader.readAsDataURL(file);       }                        document.getElementById('file').addEventListener('change',         handleFileSelect, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="box1" style="">                   <input id="file" type="file" autocomplete="off">          <br><br>      </div>            <div id="box2" style="display: none;">                    <input id="memeText" name="1" autocomplete="off">          <br><br>          <input id="memeText" name="2" autocomplete="off">          <br><br>          <canvas id="canvas" width="500" height="500"></canvas>          <br><br>          <a class="buttonLink" id="downloadLink">Download Meme!</a>          <br><br>          <a href="">Make Another Meme!</a>      </div>
           
 
 

Lista de respuestas

1
 
vote
vote
La mejor respuesta
 

Hay un par de problemas con esto.

En primer lugar, mire cómo Obtenga las coordenadas de Un clic del ratón en lienzo . Actualmente, sus compensaciones son ambas cosas.

En segundo lugar, la posición de texto se establece en la mitad del texto, no a la esquina superior izquierda o inferior izquierda. Así que en su función textHittest , desea esta declaración de devolución:

  return (x >= (text.x - 0.5*text.width) && x <= (text.x + 0.5*text.width) && y >= (text.y - 0.5*text.height) && y <= (text.y + 0.5*text.height));   

Más información sobre las propiedades del texto aquí .

Una vez que se clasifica, doble verificación si los eventos se están registrando exactamente como lo desea. Espero que sea suficiente para comenzar :)

 

There is a couple of problems with this.

Firstly, look at how to Get the coordinates of a mouse click on Canvas. Currently your offsets are both 0. Try calling canvas.offsetLeft and canvas.offsetTop - note: canvas, NOT $canvas.

Secondly, text position is set to the middle of the text, not to the top left or bottom left corner. So in your textHittest function, you want this return statement:

return (x >= (text.x - 0.5*text.width) && x <= (text.x + 0.5*text.width) && y >= (text.y - 0.5*text.height) && y <= (text.y + 0.5*text.height)); 

More on text properties here.

Once that's sorted, double check if the events are registering exactly as you want them to. Hope that's enough to get you started :)

 
 

Relacionados problema

5  Filltext no funciona  ( Filltext not working ) 
No puedo conseguir el texto en el lienzo. ¿Qué estoy haciendo mal aquí? jsfiddle - http://jsfiddle.net/qhpt6/ var el = document.getElementById('mycanva...

50  Cómo mostrar una barra de progreso en ejecución mientras se carga la página  ( How to show a running progress bar while page is loading ) 
Quiero mostrar una barra de progreso de ejecución mientras mi página está cargando como aquí , en mi página. Utilicé una imagen de carga simple en mi ejemplo...

0  Evento TouchMove tiene datos de eventos vacíos  ( Touchmove event has empty event data ) 
nomind Me doy cuenta de que 'json.stringify (EVT)' 'no imprime los datos en el objeto de evento ???? Pregunta original: tengo var canvas = document.c...

6  ¿Cómo activar el cursor para un tela JS IText?  ( How to activate the cursor for a fabric js itext ) 
Me gustaría poder agregar texto al lienzo y hacerlo directamente al modo de edición de texto donde el cursor es visible y puede comenzar a escribir. Hasta a...

1  ¿Por qué mi área de dibujo de lienzo es tan smal?  ( Why is my canvas drawing area so smal ) 
Estoy creando un control enyo basado en un lienzo. Debe capturar los eventos de ratón o dedos, y dibujarlos en él. Sin embargo, cuando dibujo en ese lienzo, s...

0  ¿Cómo crear una línea de arrastre en lienzo HTML5 usando IONIC?  ( How to create a draggable line in html5 canvas using ionic ) 
¿Cómo arrastrar líneas en lienzo? Soy capaz de agregar líneas en lienzo usando este respuesta . En esto, respuesta Line Drag es Trabajando, pero cuando...

3  D3JS: obteniendo un gráfico de línea dibujado, de la entrada "Datos JSON" usando D3.Json  ( D3js getting a line chart drawn from json data input using d3 json ) 
Recientemente comencé a estudiar D3.js y se encontró con algunos problemas. Esto es lo que he probado hasta ahora: Aquí está mi JS : d3.json("../js/...

0  Literalmente lienzo - ajuste de la imagen de lona  ( Literally canvas setting canvas image ) 
Estoy deseando establecer el lienzo para el widget literalmente lienzo a una imagen, similar a usar el código a continuación, pero no parece haber nada en la ...

1078  Cómo despejar el lienzo para volver a dibujar  ( How to clear the canvas for redrawing ) 
Después de experimentar con operaciones compuestas y dibujar imágenes en el lienzo, ahora estoy tratando de eliminar imágenes y composición. ¿Cómo hago esto? ...

2  ¿Cómo puedo convertir Beziercurve a B-Spline?  ( How can i convert beziercurve to b spline ) 
Estoy tratando de crear una animación de un camino complejo utilizando lienzo HTML5. He dividido mi camino en una curva de Bezier y he dibujado cada uno de el...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos