Skip to content

Add option to resize the viewport according to the pw-canvas element so that the maximum viewport size is used. #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
SmokyBot wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add option to resize the viewport according to the pw-canvas element so that the maximum viewport size is used. #38

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3105b9e
Added option to resize the viewport according to the pw-canvas element
Feb 8, 2016
89fa650
Merge remote-tracking branch 'origin/merge'
Sep 10, 2023
8257532
Add minor version in bower and package .jsons for resize attribute. r…
Sep 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion bower.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "angular-canvas-painter",
"version": "0.6.0",
"version": "0.6.1",
"authors": [
"Philipp Wambach"
],
Expand Down
126 changes: 69 additions & 57 deletions dist/angular-canvas-painter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/*!
* angular-canvas-painter - v0.6.0
* angular-canvas-painter - v0.6.1
*
* Copyright (c) 2017, Philipp Wambach
* Copyright (c) 2023, Philipp Wambach
* Released under the MIT license.
*/
'use strict';
Expand Down Expand Up @@ -34,7 +34,7 @@ module.run(['$templateCache', function($templateCache) {


angular.module('pw.canvas-painter')
.directive('pwCanvas', function() {
.directive('pwCanvas', ["$timeout", function ($timeout) {
return {
restrict: 'AE',
scope: {
Expand Down Expand Up @@ -63,37 +63,7 @@ angular.module('pw.canvas-painter')
options.lineWidth = options.lineWidth || 1;
options.undo = options.undo || false;
options.imageSrc = options.imageSrc || false;

// background image
if (options.imageSrc) {
var image = new Image();
image.onload = function() {
ctx.drawImage(this, 0, 0);
};
image.src = options.imageSrc;
}

//undo
if (options.undo) {
var undoCache = [];
scope.$watch(function() {
return undoCache.length;
}, function(newVal) {
scope.version = newVal;
});

scope.$watch('version', function(newVal) {
if (newVal < 0) {
scope.version = 0;
return;
}
if (newVal >= undoCache.length) {
scope.version = undoCache.length;
return;
}
undo(newVal);
});
}
options.resize = options.resize || false;

//create canvas and context
var canvas = document.createElement('canvas');
Expand All @@ -117,21 +87,41 @@ angular.module('pw.canvas-painter')
};
var ppts = [];

//set canvas size
canvas.width = canvasTmp.width = options.width;
canvas.height = canvasTmp.height = options.height;
var initCanvas = function () {
//set canvas size
if (options.resize) {
options.height = elm.height();
options.width = elm.width();
}

canvas.width = canvasTmp.width = options.width;
canvas.height = canvasTmp.height = options.height;

// background image
if (options.imageSrc) {
var image = new Image();
image.onload = function () {
ctx.drawImage(this, 0, 0);
};
image.src = options.imageSrc;
}

//set context style
ctx.fillStyle = options.backgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctxTmp.globalAlpha = options.opacity;
ctxTmp.lineJoin = ctxTmp.lineCap = 'round';
ctxTmp.lineWidth = 10;
ctxTmp.strokeStyle = options.color;
//set context style
ctx.fillStyle = options.backgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctxTmp.globalAlpha = options.opacity;
ctxTmp.lineJoin = ctxTmp.lineCap = 'round';
ctxTmp.lineWidth = options.lineWidth;
ctxTmp.strokeStyle = options.color;
};

$timeout(function () {
//init the canvas when the DOM was rendered for correct sizing.
initCanvas();
});

//Watch options
scope.$watch('options.lineWidth', function(newValue) {
scope.$watch('options.lineWidth', function (newValue) {
if (typeof newValue === 'string') {
newValue = parseInt(newValue, 10);
}
Expand All @@ -140,28 +130,28 @@ angular.module('pw.canvas-painter')
}
});

scope.$watch('options.color', function(newValue) {
scope.$watch('options.color', function (newValue) {
if (newValue) {
//ctx.fillStyle = newValue;
ctxTmp.strokeStyle = ctxTmp.fillStyle = newValue;
}
});

scope.$watch('options.opacity', function(newValue) {
scope.$watch('options.opacity', function (newValue) {
if (newValue) {
ctxTmp.globalAlpha = newValue;
}
});

var getOffset = function(elem) {
var getOffset = function (elem) {
var bbox = elem.getBoundingClientRect();
return {
left: bbox.left,
top: bbox.top
};
};

var setPointFromEvent = function(point, e) {
var setPointFromEvent = function (point, e) {
if (isTouch) {
point.x = e.changedTouches[0].pageX - getOffset(e.target).left;
point.y = e.changedTouches[0].pageY - getOffset(e.target).top;
Expand All @@ -171,8 +161,7 @@ angular.module('pw.canvas-painter')
}
};


var paint = function(e) {
var paint = function (e) {
if (e) {
e.preventDefault();
setPointFromEvent(point, e);
Expand Down Expand Up @@ -215,9 +204,9 @@ angular.module('pw.canvas-painter')
ctxTmp.stroke();
};

var copyTmpImage = function() {
var copyTmpImage = function () {
if (options.undo) {
scope.$apply(function() {
scope.$apply(function () {
undoCache.push(ctx.getImageData(0, 0, canvasTmp.width, canvasTmp.height));
if (angular.isNumber(options.undo) && options.undo > 0) {
undoCache = undoCache.slice(-1 * options.undo);
Expand All @@ -230,7 +219,7 @@ angular.module('pw.canvas-painter')
ppts = [];
};

var startTmpImage = function(e) {
var startTmpImage = function (e) {
e.preventDefault();
canvasTmp.addEventListener(PAINT_MOVE, paint, false);

Expand All @@ -247,7 +236,7 @@ angular.module('pw.canvas-painter')
paint();
};

var initListeners = function() {
var initListeners = function () {
canvasTmp.addEventListener(PAINT_START, startTmpImage, false);
canvasTmp.addEventListener(PAINT_END, copyTmpImage, false);

Expand Down Expand Up @@ -291,17 +280,40 @@ angular.module('pw.canvas-painter')
}
};

var undo = function(version) {

//undo
var undo = function (version) {
if (undoCache.length > 0) {
ctx.putImageData(undoCache[version], 0, 0);
undoCache = undoCache.slice(0, version);
}
};

if (options.undo) {
var undoCache = [];
scope.$watch(function () {
return undoCache.length;
}, function (newVal) {
scope.version = newVal;
});

scope.$watch('version', function (newVal) {
if (newVal < 0) {
scope.version = 0;
return;
}
if (newVal >= undoCache.length) {
scope.version = undoCache.length;
return;
}
undo(newVal);
});
}

initListeners();
}
};
});
}]);



Expand Down
2 changes: 1 addition & 1 deletion dist/angular-canvas-painter.min.js
View file
Open in desktop
Copy link
Copy Markdown
Author

@SmokyBot SmokyBot Sep 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file also needs to compiled again. How do you compile the .min.js?

Copy link
Copy Markdown
Author

@SmokyBot SmokyBot Sep 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have recompiled the files with gulp :)

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading