Selecteer object (tekst) op canvas element
Met het volgende loop ik een beetje vast:
Met een input veld kan ik teksten toevoegen aan en canvas element.
Dit project wil ik graag uitbreiden met een functie dat je teksten kan verplaatsen over het canvas element.
De informatie die ik nog mis is: Hoe kan ik een tekst selecteren zodat ik met een mousemove event de coördinaten kan aanpassen van deze geselecteerde tekst?
Het principe dat de canvas na elke wijziging opnieuw getekend word begrijp ik en is voor later.
Voor nu zou ik dus willen weten hoe ik een tekst kan selecteren om vervolgens de coordinaten in de array te kunnen wijzigen.
Onderstaand een kijkje wat ik tot nu toe heb:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
//maak een nieuwe array "textObjects"
var textObjects = new Array();
//functie die word geactiveerd bij het klikken op het trigger element
//de waarde word genomen van het inout element
//de tekst en coordinate worden toegevoegd aan de array textObjects
function text(element, trigger){
$(trigger).on('click', function(){
var y = textObjects.length * 40 + 40;
content.font = "30px Arial";
var text = {
value:document.querySelector(element).value,
x: 20,
y: y,
}
textObjects.push(text);
});
}
//teken functie
//loop door de array en voeg teksten toe op canvas
function draw(){
canvas = document.getElementById('canvas');
var content = canvas.getContext("2d");
for (var i = 0; i < textObjects.length; i++){
var text = textObjects[i];
content.fillText(text.value, text.x, text.y);
}
}
//functie die coordinate teruggeeft van de muis.
function mousePos(posType){
let e = window.event;
var x = e.clientX;
var y = e.clientY;
if(posType === 'x'){
return x;
}
if(posType === 'y'){
return y;
}
if(posType === 'both'){
return 'Left:' + x + ' Top:' + y;
}
}
var textObjects = new Array();
//functie die word geactiveerd bij het klikken op het trigger element
//de waarde word genomen van het inout element
//de tekst en coordinate worden toegevoegd aan de array textObjects
function text(element, trigger){
$(trigger).on('click', function(){
var y = textObjects.length * 40 + 40;
content.font = "30px Arial";
var text = {
value:document.querySelector(element).value,
x: 20,
y: y,
}
textObjects.push(text);
});
}
//teken functie
//loop door de array en voeg teksten toe op canvas
function draw(){
canvas = document.getElementById('canvas');
var content = canvas.getContext("2d");
for (var i = 0; i < textObjects.length; i++){
var text = textObjects[i];
content.fillText(text.value, text.x, text.y);
}
}
//functie die coordinate teruggeeft van de muis.
function mousePos(posType){
let e = window.event;
var x = e.clientX;
var y = e.clientY;
if(posType === 'x'){
return x;
}
if(posType === 'y'){
return y;
}
if(posType === 'both'){
return 'Left:' + x + ' Top:' + y;
}
}
Wie o wie kan mij op weg helpen?
Canvas kan je op tekenen maar niet op selecteren. Wat je wel kan is steeds nieuwe canvassen boven elkaar leggen op op die manier de illusie creëren dat je selecteert