Selecteer object (tekst) op canvas element

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Bert Lodewijks

Bert Lodewijks

18/05/2022 22:11:39
Quote Anchor link
Hallo leden,


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)
PHP script in nieuw venster Selecteer het PHP script
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
//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;
    }
}


Wie o wie kan mij op weg helpen?
 
PHP hulp

PHP hulp

16/08/2022 09:29:15
 
Jan R

Jan R

19/05/2022 10:57:05
Quote Anchor link
Volgens mij niet mogelijk.
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.