mirrors/TiddlyWiki5
1
0
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2025-02-03 20:59:09 +00:00
Code Issues Releases Wiki Activity

Smoother pencil for the image editor

Browse Source
This commit is contained in:
Jeremy Ruston 2012-04-01 20:33:18 +01:00
parent cab5c88d3a
commit 7ef554ba5e
1 changed files with 35 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
js/macros/edit.js
View File

@ -25,13 +25,22 @@ BitmapEditor.prototype.getContent = function() {
BitmapEditor.prototype.renderInDom = function() { BitmapEditor.prototype.renderInDom = function() {
var tiddler = this.macroNode.store.getTiddler(this.macroNode.tiddlerTitle), var tiddler = this.macroNode.store.getTiddler(this.macroNode.tiddlerTitle),
canvas = this.macroNode.content[0].domNode, canvas = this.macroNode.content[0].domNode,
img = new Image(); currImage = new Image();
// Set the macro node itself to be position: relative
this.macroNode.domNode.style.position = "relative"; this.macroNode.domNode.style.position = "relative";
img.src = "data:" + tiddler.type + ";base64," + tiddler.text; // Get the current bitmap into an image object
canvas.width = img.width; currImage.src = "data:" + tiddler.type + ";base64," + tiddler.text;
canvas.height = img.height; // Copy it to the on-screen canvas
canvas.width = currImage.width;
canvas.height = currImage.height;
var ctx = canvas.getContext("2d"); var ctx = canvas.getContext("2d");
ctx.drawImage(img,0,0); ctx.drawImage(currImage,0,0);
// And also copy the current bitmap to the off-screen canvas
this.currCanvas = document.createElement("canvas");
this.currCanvas.width = currImage.width;
this.currCanvas.height = currImage.height;
ctx = this.currCanvas.getContext("2d");
ctx.drawImage(currImage,0,0);
}; };
BitmapEditor.prototype.addEventHandlers = function() { BitmapEditor.prototype.addEventHandlers = function() {
@ -55,7 +64,6 @@ BitmapEditor.prototype.addEventHandlers = function() {
if(self.brushDown) { if(self.brushDown) {
self.brushDown = false; self.brushDown = false;
self.strokeEnd(); self.strokeEnd();
self.saveChanges();
} }
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
@ -80,7 +88,6 @@ BitmapEditor.prototype.addEventHandlers = function() {
if(self.brushDown) { if(self.brushDown) {
self.brushDown = false; self.brushDown = false;
self.strokeEnd(); self.strokeEnd();
self.saveChanges();
event.preventDefault(); event.preventDefault();
event.stopPropagation(); event.stopPropagation();
return false; return false;
@ -91,29 +98,39 @@ BitmapEditor.prototype.addEventHandlers = function() {
BitmapEditor.prototype.strokeStart = function(x,y) { BitmapEditor.prototype.strokeStart = function(x,y) {
var canvas = this.macroNode.content[0].domNode, var canvas = this.macroNode.content[0].domNode,
canvasRect = canvas.getBoundingClientRect(), canvasRect = canvas.getBoundingClientRect();
ctx = canvas.getContext("2d"); // Start off a new stroke
this.startX = x - canvasRect.left; this.stroke = [{x: x - canvasRect.left, y: y - canvasRect.top}];
this.startY = y - canvasRect.top;
// ctx.beginPath();
ctx.moveTo(this.startX,this.startY);
}; };
BitmapEditor.prototype.strokeMove = function(x,y) { BitmapEditor.prototype.strokeMove = function(x,y) {
var canvas = this.macroNode.content[0].domNode, var canvas = this.macroNode.content[0].domNode,
canvasRect = canvas.getBoundingClientRect(), canvasRect = canvas.getBoundingClientRect(),
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
ctx.lineWidth = 2; // Add the new position to the end of the stroke
this.stroke.push({x: x - canvasRect.left, y: y - canvasRect.top})
// Redraw the previous image
ctx.drawImage(this.currCanvas,0,0);
// Render the stroke
ctx.lineWidth = 3;
ctx.lineCap = "round"; ctx.lineCap = "round";
ctx.lineJoin = "round"; ctx.lineJoin = "round";
this.startX = x - canvasRect.left; ctx.beginPath();
this.startY = y - canvasRect.top; ctx.moveTo(this.stroke[0].x,this.stroke[0].y);
ctx.lineTo(this.startX,this.startY); for(var t=1; t<this.stroke.length; t++) {
var s = this.stroke[t];
ctx.lineTo(s.x,s.y);
}
ctx.stroke(); ctx.stroke();
}; };
BitmapEditor.prototype.strokeEnd = function() { BitmapEditor.prototype.strokeEnd = function() {
// Copy the bitmap to the off-screen canvas
var canvas = this.macroNode.content[0].domNode,
ctx = this.currCanvas.getContext("2d");
ctx.drawImage(canvas,0,0);
// Save the image into the tiddler
this.saveChanges();
}; };
BitmapEditor.prototype.saveChanges = function() { BitmapEditor.prototype.saveChanges = function() {