Drag in vanilla js using dotval math instead of translate

Developer
Paul
Size
2,662 Kb
Views
16,192
  1. Drag in vanilla js using dotval math instead of translate Previews
  2. Drag in vanilla js using dotval math instead of translate HTML Codes
  3. Drag in vanilla js using dotval math instead of translate CSS Codes
  4. Drag in vanilla js using dotval math instead of translate JS Codes

How do I make an drag in vanilla js using dotval math instead of translate?

Drag and drop + rotate img with vanilla js, wrting own translate method.... What is a drag in vanilla js using dotval math instead of translate? How do you make a drag in vanilla js using dotval math instead of translate? This script and codes were developed by Paul on 27 October 2022, Thursday.

Drag in vanilla js using dotval math instead of translate Previews
IQ Test

Drag in vanilla js using dotval math instead of translate - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>drag in vanilla js using dotval math instead of translate</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas width="400" height="400" id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Drag in vanilla js using dotval math instead of translate - Script Codes CSS Codes

canvas{ border:2px black solid; float: left;
}

Drag in vanilla js using dotval math instead of translate - Script Codes JS Codes

var doc = document.getElementById("canvas");
var ctx = doc.getContext("2d");
//geklaut von florian b um die y-axis nach oben auszurichten, da dies in cnavas x, -y ist
ctx.transform(1, 0, 0, 1, 0, 0);
//mouse vector helper
var img = new Image();
var imgD = [150,150];
var imgV = [0, 0];
//var mouseV = [0,0];
// handler um ereignnis zu prüfen
var k;
img.src = "http://placekitten.com/g/150/150";
img.onload = function() { //initial zeichnen, hier können auch imgV a1 und a2 stehen ctx.drawImage(img,imgV[0],imgV[1]);
}
//Mousedown
window.onmousedown = function(e){ // hier wird das event onmousedown boolean gefragt e.which! if(e.which == 1){ //canvas offset GOGO var x = e.x - canvas.offsetLeft; var y = e.y - canvas.offsetTop; //mousevector var mouseV = [x,y]; console.log("mouseV"+mouseV); console.log("imgV"+imgV); //startVector drag var startV = subtr(mouseV, imgV); console.log("startV: "+startV); //endvector drag var endV = subtr(addiere(imgV, imgD), mouseV); console.log("endV: "+endV); if (startV[0] >= 0 && startV[1] >= 0 && endV[0] >= 0 && endV[1] >= 0) { k = mouseV; } //k=mouseV; }
}
//drag
window.onmousemove = function(e){ //frage das event mousemove ab if(e.which == 1){ if(k){ //baue eine clear funtion!! clear(); //achtung hier das offset vom canvas miteinbeziehen var x = e.x- canvas.offsetLeft; var y = e.y - canvas.offsetTop; var mouseV = [x,y]; //helper //console.log("mousemoveX: "+x); //console.log("mousemoveY: "+y); } var holdPlace = subtr(mouseV, k); imgV = addiere(imgV, holdPlace); drawImage(); k = mouseV; }
}
window.onmouseup = function() { k = null;
}
//mehr helper clean() canvas up
function clear() { ctx.clearRect(0, 0, canvas.width, canvas.height);
}
function drawImage(){ ctx.drawImage(img, imgV[0],imgV[1] );
}
//helper skalarsh1t
function addiere(a, b){ return [a[0]+b[0], a[1]+b[1]];
}
function subtr(a,b){ return [a[0]-b[0], a[1]-b[1]];
}
function mult(a,b){ return [a[0]*b[0]+a[1]*b[1]];
}
function betrag(a){ return Math.sqrt(a[0]*a[0]+a[1]*a[1]);
}
function skalar(a, b){ return (mult(a,b) / (betrag(a) * betrag(b)));
}
function winkel(a, b){ return (Math.acos(skalar(a, b)) * (360 / (2*Math.PI)));
}
//testing
/*var z = [4,3];
var x = [2,1];
console.log("add:" + addiere(z,x));
console.log("sub:" + subtr(z,x));
console.log("mult: "+ mult(z,x));
console.log("betrag: z -->" + betrag(z));
console.log("betrag: x -->" + betrag(x));
console.log("skalar: " + skalar(z,x));
console.log("winkel: "+winkel(z,x) +"°");*/
//console.log("mouseV: "+mouseV);
Drag in vanilla js using dotval math instead of translate - Script Codes
Drag in vanilla js using dotval math instead of translate - Script Codes
Home Page Home
Developer Paul
Username paulq
Uploaded October 27, 2022
Rating 3
Size 2,662 Kb
Views 16,192
Do you need developer help for Drag in vanilla js using dotval math instead of translate?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Paul (paulq) Script Codes
Name
A Pen by paul
TabContainer pure css3
Canvas tutorial
Three js
A Pen by paul
Input tabcontainer
Dropdow
Flexbox-Slider-Test
Callback function
Setter getter closure functions
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!