68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
function Paint(context, options) {
|
|
if (context !== undefined && context !== null) {
|
|
this.context = context;
|
|
}
|
|
|
|
if (options !== undefined && options !== null) {
|
|
this.options = options;
|
|
}
|
|
|
|
return this;
|
|
}
|
|
|
|
Paint.prototype = {
|
|
context: undefined,
|
|
options: {
|
|
brushColour: "#000000",
|
|
brushWidth: 3
|
|
},
|
|
self: this,
|
|
pos: 0,
|
|
isPainting: false,
|
|
clickX: [],
|
|
clickY: [],
|
|
clickDrag: [],
|
|
addClick: function (x, y, dragging) {
|
|
this.clickX.push(x);
|
|
this.clickY.push(y);
|
|
this.clickDrag.push(dragging);
|
|
},
|
|
clear: function () {
|
|
this.clickX = [];
|
|
this.clickY = [];
|
|
this.clickDrag = [];
|
|
this.pos = 0;
|
|
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
|
|
},
|
|
draw: function () {
|
|
this.context.strokeStyle = this.options.brushColour;
|
|
this.context.lineJoin = "round";
|
|
this.context.lineWidth = this.options.brushWidth;
|
|
|
|
while (this.pos < this.clickX.length) {
|
|
this.context.beginPath();
|
|
if (this.clickDrag[this.pos] && this.pos) {
|
|
this.context.moveTo(this.clickX[this.pos - 1], this.clickY[this.pos - 1]);
|
|
} else {
|
|
this.context.moveTo(this.clickX[this.pos] - 1, this.clickY[this.pos]);
|
|
}
|
|
|
|
this.context.lineTo(this.clickX[this.pos], this.clickY[this.pos]);
|
|
this.context.closePath();
|
|
this.context.stroke();
|
|
this.pos++;
|
|
}
|
|
},
|
|
drawImage: function (imageUrl) {
|
|
var imageObj = new Image();
|
|
var context = this.context;
|
|
imageObj.onload = function() {
|
|
context.drawImage(imageObj, 0, 0, 1024, 768);
|
|
};
|
|
imageObj.src = imageUrl;
|
|
},
|
|
stop: function () {
|
|
this.isPainting = false;
|
|
}
|
|
}
|