All geek questions in one place

HTML5 canvas - drag and drop text on canvas

I want to drag the text that is on the Canvas, I found the tutorial "How to drag Rectange, but I could not implement it in the text." This is the following code for moving a rectangle, can someone help me implement this over text?

<!doctype html> <html> <head> <meta charset="UTF-8" /> <title>Canvas Drag and Drop Test</title> </head> <body> <section> <div> <canvas id="canvas" width="400" height="300"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> </div> <script type="text/javascript"> var canvas; var ctx; var x = 75; var y = 50; var dx = 5; var dy = 3; var WIDTH = 400; var HEIGHT = 300; var dragok = false; function rect(x,y,w,h) { ctx.beginPath(); ctx.rect(x,y,w,h); ctx.closePath(); ctx.fill(); } function clear() { ctx.clearRect(0, 0, WIDTH, HEIGHT); } function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); return setInterval(draw, 10); } function draw() { clear(); ctx.fillStyle = "#FAF7F8"; rect(0,0,WIDTH,HEIGHT); ctx.fillStyle = "#444444"; rect(x - 15, y - 15, 30, 30); } function myMove(e){ if (dragok){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; } } function myDown(e){ if (e.pageX < x + 15 + canvas.offsetLeft && e.pageX > x - 15 + canvas.offsetLeft && e.pageY < y + 15 + canvas.offsetTop && e.pageY > y -15 + canvas.offsetTop){ x = e.pageX - canvas.offsetLeft; y = e.pageY - canvas.offsetTop; dragok = true; canvas.onmousemove = myMove; } } function myUp(){ dragok = false; canvas.onmousemove = null; } init(); canvas.onmousedown = myDown; canvas.onmouseup = myUp; </script> </section> </body> </html>

Test

And also, when I add this code to the HEAD tag, it does not work. Why is this so?

+4
source share
1 answer

Basic example http://jsfiddle.net/h3BCq/1/

Prettied one (rect function is supported, a new text function is added, a bounding box for text is drawn) http://jsfiddle.net/h3BCq/2/

I definitely cheated. I used px for the font size to make it easier to capture its width. You could use em or glasses, although you just need to convert the pixels to get an estimated width. I simply deleted rect and added filltext, and changed the check to check the width of the text.

+8
source

Source: https://habr.com/ru/post/1340000/

More articles:


All Articles