mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 02:30 Benutzername: Passwort: Auto-Login

Thema: Radieren bei einem Maltool mit HTML 5 und jQuery vom 30.04.2012

Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Radieren bei einem Maltool mit HTML 5 und jQuery
Autor Nachricht
MasterDomi
Threadersteller

Dabei seit: 29.09.2009
Ort: -
Alter: 33
Geschlecht: Männlich
Verfasst Mo 30.04.2012 17:59
Titel

Radieren bei einem Maltool mit HTML 5 und jQuery

Antworten mit Zitat Zum Seitenanfang

Hallo zusammen,

habe ein Maltool mit Hilfe von HTML5 canvas und jQuery realisiert. Bin nach diesem Tutorial vorgegangen: http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/.
Allerdings ist dort der Radierer so realisiert, dass einfach mit weißer Farbe gemalt wird.
Ich möchte jedoch einen transparenten Radierer![/code]
Jetzt habe ich schon Ewigkeiten nach einer Lösung gesucht, aber nur Ansätze gefunden, die ich leider nicht nachvollziehen kann.  (http://stackoverflow.com/questions/3328906/erasing-in-html5-canvas)

Kann mir jemand sagen, wie ich das ganze angehen muss? Ich denke die Musik spielt sich in der redraw-Funktion ab.

Hier mein Code:
Code:

var canvasWidth = 300;
            var canvasHeight = 166;
            var clickColor = new Array();
            var curColor = "#099ED3";
           
            var clickSize = new Array();
            var curSize = 4;
           
            var clickX = new Array();
            var clickY = new Array();
            var clickDrag = new Array();
            var paint;
           
           
            var clickTool = new Array();
            var curTool = "marker";
           
           
            // Canvas erstellen und einfügen #canvascontainer
            var canvascontainer = document.getElementById('canvascontainer');
            canvas = document.createElement('canvas');
            canvas.setAttribute('width', canvasWidth);
            canvas.setAttribute('height', canvasHeight);
            canvas.setAttribute('id', 'canvas');
            canvascontainer.appendChild(canvas);
            if(typeof G_vmlCanvasManager != 'undefined') {
                canvas = G_vmlCanvasManager.initElement(canvas);
            }
            context = canvas.getContext("2d");
           
           
           
           
           
           
           
           
           
            function addClick(x, y, dragging) {
                clickX.push(x);
                clickY.push(y);
                clickDrag.push(dragging);
               
            //if eraser...
            
                clickSize.push(curSize);
            }
           
           
           
            //bei mousedown position lokalisieren
            $('#canvas').mousedown(function(e){
                var mouseX = e.pageX - this.offsetLeft;
                var mouseY = e.pageY - this.offsetTop;
      
                paint = true;
                addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
                redraw();
            });
           
            $('#canvas').mousemove(function(e){
                if(paint){
                    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
                    redraw();
                }
            });
           
            $('#canvas').mouseup(function(e){
                paint = false;
            });
           
            $('#canvas').mouseleave(function(e){
                paint = false;
            });
           
         
         
           $('#delete').click(function(){
               
            
            clickX = new Array();
            clickY = new Array();
            clickDrag = new Array();
            clickColor = new Array();
            clickSize = new Array();
            
            clearCanvas();
            
            return false;
            });
           
           
           
            function clearCanvas() {
                //context.fillStyle = '#ffffff'; // Work around for Chrome
                //context.fillRect(0, 0, canvasWidth, canvasHeight); // Fill in the canvas with white
                canvas.width = canvas.width; // clears the canvas //lässt weißen Hintergrund
            
            }
           
           
           
           
           
            function redraw(){
                var radius;
               
                clearCanvas();
            
                context.lineJoin = "round";
                context.lineCap = "round";
            
            
            if(curTool == "eraser") {
               //context.save();
                    //clickColor.push("rgba(0,0,0,0)");
               //clickColor.push("#ffffff");
               context.globalCompositeOperation = "xor";
               //context.restore();
                } else {
                
                    clickColor.push(curColor);
               context.globalCompositeOperation = "source-over";
                }
            
               
                               
                for (var i=0; i < clickX.length; i++) {
                   
                    if (clickSize[i] == 2){
                  radius = 2;
                    }else if(clickSize[i] == 3){
                  radius = 3;
                    }else if(clickSize[i] == 4){
                  radius = 4;
                    }else if(clickSize[i] == 5){
                  radius = 5;
                    }else if(clickSize[i] == 6){
                  radius = 6;
                    }else if(clickSize[i] == 7){
                  radius = 7;
                    }else if(clickSize[i] == 8){
                  radius = 8;
                    }else if(clickSize[i] == 9){
                  radius = 9;
                    }else if(clickSize[i] == 10){
                  radius = 10;
               }
               
               context.lineWidth = radius;
                
                    context.beginPath();
                    if (clickDrag[i] && i) {
                        context.moveTo(clickX[i-1], clickY[i-1]);
                    } else {
                        context.moveTo(clickX[i]-1, clickY[i]);
                    }
               
                    context.lineTo(clickX[i], clickY[i]);
                   
                    context.clip();
               context.strokeStyle = clickColor[i];
                    context.stroke();
               
               //context.closePath();
               
                }
            
            }


Wäre toll, wenn Jemand eine Idee hat! Lächel

Besten Dank im Voraus!
  View user's profile Private Nachricht senden
Ähnliche Themen jquery mit html
jQuery-Funktion HTML-seitenübergreifend aufrufen
jquery/css/html..? : anzeige von inhalt abh. von scrollpos.
OnClick jQuery layer aber mit html page
jQuery Plugin - Slider als Input wie in jQuery UI
jquery - hide content in jquery object
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.