scratchfoundation/paper.js
1
0
Fork 0
mirror of https://github.com/scratchfoundation/paper.js.git synced 2024-12-28 17:02:24 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge branch 'georeith-true-resize-canvas'

Browse source
This commit is contained in:
Jürg Lehni 2014-12-30 00:14:58 +01:00
commit ac9c3f03c4
2 changed files with 44 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/view/CanvasView.js
View file

@ -68,13 +68,17 @@ var CanvasView = View.extend(/** @lends CanvasView# */{
// Upscale the canvas if the two ratios don't match.
element.width = width * pixelRatio;
element.height = height * pixelRatio;
if (pixelRatio !== 1) {
style.width = width + 'px';
style.height = height + 'px';
// Now scale the context to counter the fact that we've manually
// scaled our canvas element.
this._context.scale(pixelRatio, pixelRatio);
}
if (pixelRatio !== 1) {
// If the canvas is resizable then don't override it otherwise
// give it fixed dimensions so it doesn't get resized.
if (this._resizable === false) {
style.width = width + 'px';
style.height = height + 'px';
}
// Now scale the context to counter the fact that we've manually
// scaled our canvas element.
this._context.scale(pixelRatio, pixelRatio);
}
},
/**

71
src/view/View.js
View file

@ -52,48 +52,43 @@ var View = Base.extend(Emitter, /** @lends View# */{
userDrag: none,
tapHighlightColor: 'rgba(0,0,0,0)'
});
// If the element has the resize attribute, resize the it to fill the
// window and resize it again whenever the user resizes the window.
if (PaperScope.hasAttribute(element, 'resize')) {
// Subtract element' viewport offset from the total size, to
// stretch it in
var offset = DomElement.getOffset(element, true),
that = this;
size = DomElement.getViewportBounds(element)
.getSize().subtract(offset);
this._windowEvents = {
resize: function() {
// Only update element offset if it's not invisible, as
// otherwise the offset would be wrong.
if (!DomElement.isInvisible(element))
offset = DomElement.getOffset(element, true);
// Set the size now, which internally calls onResize
// and redraws the view
that.setViewSize(DomElement.getViewportBounds(element)
.getSize().subtract(offset));
}
};
DomEvent.add(window, this._windowEvents);
} else {
// Try visible size first, since that will help handling previously
// scaled canvases (e.g. when dealing with pixel-ratio)
size = DomElement.getSize(element);
if (size.isNaN() || size.isZero()) {
// If the element is invisible, we cannot directly access
// element.width / height, because they would appear 0.
// Reading the attributes should still work.
var getSize = function(name) {
return element[name]
|| parseInt(element.getAttribute(name), 10);
};
size = new Size(getSize('width'), getSize('height'));
}
}
var getCanvasSize = function() {
// Try visible size first, since that will help handling previously
// scaled canvases (e.g. when dealing with pixel-ratio)
size = DomElement.getSize(element);
if (size.isNaN() || size.isZero()) {
// If the element is invisible, we cannot directly access
// element.width / height, because they would appear 0.
// Reading the attributes should still work.
var getSize = function(name) {
return element[name]
|| parseInt(element.getAttribute(name), 10);
};
size = new Size(getSize('width'), getSize('height'));
}
return size;
};
// If the element has the resize attribute, listen to resize events and
// update its coordinate space accordingly
this._resizable = PaperScope.hasAttribute(element, 'resize');
if (this._resizable) {
var that = this;
this._windowEvents = {
resize: function() {
// setViewSize is aware of a resizable canvas and only updates the
// coordinate space based on the physical dimensions and pixel ratio
that.setViewSize(getCanvasSize());
}
};
DomEvent.add(window, this._windowEvents);
}
// Set canvas size even if we just deterined the size from it, since
// it might have been set to a % size, in which case it would use some
// default internal size (300x150 on WebKit) and scale up the pixels.
// We also need this call here for HiDPI support.
this._setViewSize(size);
this._setViewSize(getCanvasSize());
// TODO: Test this on IE:
if (PaperScope.hasAttribute(element, 'stats')
&& typeof Stats !== 'undefined') {