Avatar billede kak Nybegynder
13. januar 2015 - 17:25 Der er 1 kommentar og
1 løsning

HTML5 canvas

Jeg forsøger at lave en HTML5 funktion, hvor en bruger kan markere et (firkantet) område med musen, men med nogle ekstra funktioner.

Jeg har den grundlæggende funktion (indsat herunder), hvor jeg kan markere et område. Men jeg har brug for at udvide den med disse ting...

1. Når man markere et område, skal opacity på det markerede område være 1.0, mens opacity på resten af canvas skal være 0.4.

2. Man skal kunne flytte den firkant man har markeret med musen (og opacity skal så ændres som hvis man havde tegnet en ny firkant).

3. Den firkant man laver, skal tvinges til at følge et forudbestemt forhold, f.eks. at den skal være kvadratisk (det skal blot hardcodes i denne version).

Nogle der kan hjælpe med en eller flere af disse ting?



var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d'),
    rect = {},
    drag = false;

    function draw() {
        ctx.strokeRect(rect.startX, rect.startY, rect.w, rect.h);
    }

    function mouseDown(e) {

        rect.startX = e.pageX - this.offsetLeft;
        rect.startY = e.pageY - this.offsetTop;
        drag = true;
    }

    function mouseUp() {
        drag = false;
    }

    function mouseMove(e) {
        if (drag) {
            rect.w = (e.pageX - this.offsetLeft) - rect.startX;
            rect.h = (e.pageY - this.offsetTop) - rect.startY;
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            draw();
        }
    }

    function init() {
        canvas.addEventListener('mousedown', mouseDown, false);
        canvas.addEventListener('mouseup', mouseUp, false);
        canvas.addEventListener('mousemove', mouseMove, false);
    }

    init();
Avatar billede kak Nybegynder
13. januar 2015 - 21:00 #1
Jeg er kommet i tanke om en lidt anden metode til at opnå det samme, som måske gør det lidt mere simpelt.

Hvis jeg nu på forhånd laver en boks med de rette forhold, og så bare gør det muligt at flytte på baggrundsbilledet i canvas. Måske er det også nemmere for brugeren.

Jeg vil stadig gerne have, at det "aktuelle" område indenfor den definerede firkant har opacity 1, mens alt udenom har 0.4, så det er let at se, hvad der er valgt.
Avatar billede kak Nybegynder
13. januar 2015 - 21:14 #2
Min nye tilgang ledte mig ind på dette link: http://jsfiddle.net/AbdiasSoftware/Us9nH/

Det løser opgaven :-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester