MasterDomi
Threadersteller
Dabei seit: 29.09.2009
Ort: -
Alter: 33
Geschlecht:
|
Verfasst Mo 30.04.2012 17:59
Titel Radieren bei einem Maltool mit HTML 5 und jQuery |
|
|
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!
Besten Dank im Voraus!
|
|