Add ctx.copy() helper
parent
fe3c09d197
commit
f20bd1db92
|
@ -102,6 +102,7 @@ Selection.prototype.cut_out_background = function(){
|
|||
var sel = this;
|
||||
var cutout = sel.canvas;
|
||||
if(transparency){
|
||||
// @FIXME: this doesn't work so well with transparency between 0 and 1
|
||||
ctx.save();
|
||||
ctx.globalCompositeOperation = "destination-out";
|
||||
ctx.drawImage(cutout, sel._x, sel._y);
|
||||
|
@ -129,12 +130,11 @@ Selection.prototype.position = function(){
|
|||
|
||||
Selection.prototype.resize = function(){
|
||||
var sel = this;
|
||||
var width = sel._w;
|
||||
var height = sel._h;
|
||||
var new_width = sel._w;
|
||||
var new_height = sel._h;
|
||||
|
||||
var new_canvas = new Canvas(width, height);
|
||||
|
||||
new_canvas.ctx.drawImage(sel.canvas, 0, 0, width, height);
|
||||
var new_canvas = new Canvas(new_width, new_height);
|
||||
new_canvas.ctx.drawImage(sel.canvas, 0, 0, new_width, new_height);
|
||||
|
||||
sel.replace_canvas(new_canvas);
|
||||
};
|
||||
|
@ -188,9 +188,7 @@ Selection.prototype.crop = function(){
|
|||
sel.instantiate(null, "passive");
|
||||
if(sel.canvas){
|
||||
undoable(0, function(){
|
||||
canvas.width = sel.canvas.width;
|
||||
canvas.height = sel.canvas.height;
|
||||
ctx.drawImage(sel.canvas, 0, 0);
|
||||
ctx.copy(sel.canvas);
|
||||
$canvas.trigger("update"); //update handles
|
||||
});
|
||||
}
|
||||
|
|
|
@ -57,15 +57,9 @@ function open_from_Image(img, callback){
|
|||
reset_canvas(); // (with newly reset colors)
|
||||
reset_magnification();
|
||||
|
||||
// @TODO: use copy helper
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
$canvas_area.trigger("resize");
|
||||
|
||||
ctx.copy(img);
|
||||
detect_transparency();
|
||||
$canvas_area.trigger("resize");
|
||||
|
||||
callback && callback();
|
||||
});
|
||||
|
@ -406,10 +400,7 @@ function undo(){
|
|||
|
||||
redos.push(new Canvas(canvas));
|
||||
|
||||
var c = undos.pop();
|
||||
canvas.width = c.width;
|
||||
canvas.height = c.height;
|
||||
ctx.drawImage(c, 0, 0);
|
||||
ctx.copy(undos.pop());
|
||||
|
||||
$canvas_area.trigger("resize");
|
||||
|
||||
|
@ -421,10 +412,7 @@ function redo(){
|
|||
|
||||
undos.push(new Canvas(canvas));
|
||||
|
||||
var c = redos.pop();
|
||||
canvas.width = c.width;
|
||||
canvas.height = c.height;
|
||||
ctx.drawImage(c, 0, 0);
|
||||
ctx.copy(redos.pop());
|
||||
|
||||
$canvas_area.trigger("resize");
|
||||
|
||||
|
|
|
@ -26,7 +26,7 @@ var $G = $(window);
|
|||
function Cursor(cursor_def){
|
||||
return "url(images/cursors/" + cursor_def[0] + ".png) " +
|
||||
cursor_def[1].join(" ") +
|
||||
", " + cursor_def[2]
|
||||
", " + cursor_def[2];
|
||||
}
|
||||
|
||||
function E(t){
|
||||
|
@ -52,24 +52,31 @@ function get_rgba_from_color(color){
|
|||
}
|
||||
|
||||
function Canvas(width, height){
|
||||
var image = width;
|
||||
|
||||
var new_canvas = E("canvas");
|
||||
var new_ctx = new_canvas.getContext("2d");
|
||||
|
||||
new_ctx.imageSmoothingEnabled = false;
|
||||
new_ctx.mozImageSmoothingEnabled = false;
|
||||
new_ctx.webkitImageSmoothingEnabled = false;
|
||||
|
||||
new_canvas.ctx = new_ctx;
|
||||
|
||||
new_ctx.copy = function(image){
|
||||
new_canvas.width = image.naturalWidth || image.width;
|
||||
new_canvas.height = image.naturalHeight || image.height;
|
||||
new_ctx.drawImage(image, 0, 0);
|
||||
};
|
||||
|
||||
if(width && height){
|
||||
// new Canvas(width, height)
|
||||
new_canvas.width = width;
|
||||
new_canvas.height = height;
|
||||
}else{
|
||||
}else if(image){
|
||||
// new Canvas(image)
|
||||
var copy_of = width;
|
||||
if(copy_of){
|
||||
new_canvas.width = copy_of.width;
|
||||
new_canvas.height = copy_of.height;
|
||||
new_ctx.drawImage(copy_of, 0, 0);
|
||||
new_ctx.copy(image);
|
||||
}
|
||||
}
|
||||
new_canvas.ctx = new_ctx;
|
||||
|
||||
return new_canvas;
|
||||
}
|
||||
|
|
|
@ -273,10 +273,7 @@ function apply_image_transformation(fn){
|
|||
undoable(0, function(){
|
||||
this_ones_a_frame_changer();
|
||||
|
||||
canvas.width = new_canvas.width;
|
||||
canvas.height = new_canvas.height;
|
||||
|
||||
ctx.drawImage(new_canvas, 0, 0);
|
||||
ctx.copy(new_canvas);
|
||||
|
||||
$canvas.trigger("update"); // update handles
|
||||
});
|
||||
|
|
|
@ -204,17 +204,13 @@
|
|||
// Write the image data to the canvas
|
||||
var img = new Image();
|
||||
img.onload = function(){
|
||||
canvas.width = img.naturalWidth;
|
||||
canvas.height = img.naturalHeight;
|
||||
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(img, 0, 0);
|
||||
|
||||
ctx.copy(img);
|
||||
// detect_transparency() here would probably just be annoying (and slow things a bit)
|
||||
$canvas_area.trigger("resize");
|
||||
};
|
||||
img.src = uri;
|
||||
|
||||
// @TODO: playback recorded in-progress mouse operations here
|
||||
};
|
||||
img.src = uri;
|
||||
}
|
||||
});
|
||||
|
||||
|
|
20
src/tools.js
20
src/tools.js
|
@ -89,8 +89,7 @@ tools = [{
|
|||
},
|
||||
mouseup: function(){
|
||||
// Revert the inverty brush paint
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(undos[undos.length-1], 0, 0);
|
||||
ctx.copy(undos[undos.length-1]);
|
||||
|
||||
// Cut out the polygon
|
||||
var cutout = cut_polygon(
|
||||
|
@ -170,7 +169,8 @@ tools = [{
|
|||
}, {
|
||||
name: "Eraser/Color Eraser",
|
||||
description: "Erases a portion of the picture, using the selected eraser shape.",
|
||||
cursor: ["precise", [16, 16], "crosshair"], //@todo: draw square on canvas
|
||||
cursor: ["precise", [16, 16], "crosshair"],
|
||||
// @TODO: draw square on canvas as cursor
|
||||
continuous: "space",
|
||||
paint: function(ctx, x, y){
|
||||
|
||||
|
@ -569,11 +569,10 @@ tools = [{
|
|||
paint: function(ctx, x, y){
|
||||
if(this.points.length < 1){ return; }
|
||||
|
||||
// Clear the canvas to the previous image
|
||||
// Get rid of strokes drawn while constructing the shape
|
||||
// Clear the canvas to the previous image to get
|
||||
// rid of lines drawn while constructing the shape
|
||||
// @TODO: stop needing this
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(this.canvas_base, 0, 0);
|
||||
ctx.copy(this.canvas_base);
|
||||
|
||||
var i = this.points.length - 1;
|
||||
this.points[i].x = x;
|
||||
|
@ -590,11 +589,10 @@ tools = [{
|
|||
complete: function(ctx, x, y){
|
||||
if(this.points.length < 1){ return; }
|
||||
|
||||
// Clear the canvas to the previous image
|
||||
// Get rid of strokes drawn while constructing the shape
|
||||
// Clear the canvas to the previous image to get
|
||||
// rid of lines drawn while constructing the shape
|
||||
// @TODO: stop needing this
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.drawImage(this.canvas_base, 0, 0);
|
||||
ctx.copy(this.canvas_base);
|
||||
|
||||
// Draw an antialiased polygon
|
||||
ctx.beginPath();
|
||||
|
|
Loading…
Reference in New Issue