Hopiu/fabric.js
1
0
Fork 0
mirror of https://github.com/Hopiu/fabric.js.git synced 2026-05-14 08:43:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Trim trailing spaces.

Browse source
This commit is contained in:
XhmikosR 2014-02-19 14:48:46 +02:00
parent 1d4356008a
commit d8b1eca014
4 changed files with 93 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
README.md
View file

@ -160,29 +160,29 @@ For example:
#### Adding red rectangle to canvas
```html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script src="lib/fabric.js"></script>
<script>
var canvas = new fabric.Canvas('canvas');
<script src="lib/fabric.js"></script>
<script>
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
top : 100,
left : 100,
width : 60,
height : 70,
fill : 'red'
});
var rect = new fabric.Rect({
top : 100,
left : 100,
width : 60,
height : 70,
fill : 'red'
});
canvas.add(rect);
</script>
</body>
</html>
canvas.add(rect);
</script>
</body>
</html>
```
### Helping Fabric
@ -231,4 +231,3 @@ SOFTWARE.
[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/kangax/fabric.js/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

60
lib/excanvas-diff.patch
View file

@ -6,7 +6,7 @@ Index: excanvas.js
o2.arcScaleX_ = o1.arcScaleX_;
o2.arcScaleY_ = o1.arcScaleY_;
o2.lineScale_ = o1.lineScale_;
+ o2.rotation_ = o1.rotation_; // used for images
+ o2.rotation_ = o1.rotation_; // used for images
}
var colorData = {
@ -14,7 +14,7 @@ Index: excanvas.js
this.arcScaleX_ = 1;
this.arcScaleY_ = 1;
this.lineScale_ = 1;
+ this.rotation_ = 0;
+ this.rotation_ = 0;
}
var contextPrototype = CanvasRenderingContext2D_.prototype;
@ -26,10 +26,10 @@ Index: excanvas.js
+ contextPrototype.drawImage = function(image) {
var dx, dy, dw, dh, sx, sy, sw, sh;
-
+
+
+ // to fix new Image() we check the existance of runtimeStyle
+ var rts = image.runtimeStyle.width;
+
+
// to find the original width we overide the width and height
- var oldRuntimeWidth = image.runtimeStyle.width;
- var oldRuntimeHeight = image.runtimeStyle.height;
@ -38,25 +38,25 @@ Index: excanvas.js
+ if(rts) {
+ var oldRuntimeWidth = image.runtimeStyle.width;
+ var oldRuntimeHeight = image.runtimeStyle.height;
+
+
+ image.runtimeStyle.width = 'auto';
+ image.runtimeStyle.height = 'auto';
+ image.runtimeStyle.height = 'auto';
+ }
// get the original size
var w = image.width;
var h = image.height;
-
+
+
// and remove overides
- image.runtimeStyle.width = oldRuntimeWidth;
- image.runtimeStyle.height = oldRuntimeHeight;
-
+ if(rts) {
+ image.runtimeStyle.width = oldRuntimeWidth;
+ image.runtimeStyle.height = oldRuntimeHeight;
+ image.runtimeStyle.height = oldRuntimeHeight;
+ }
+
+
if (arguments.length == 3) {
dx = arguments[1];
dy = arguments[2];
@ -64,9 +64,9 @@ Index: excanvas.js
var W = 10;
var H = 10;
+
+
+ var scaleX = scaleY = 1;
+
+
+ // FIX: divs give better quality then vml image and also fixes transparent PNG's
+ vmlStr.push(' <div style="position:absolute;');
@ -94,21 +94,21 @@ Index: excanvas.js
- 'Dy=', mr(d.y / Z), '');
+ // Scaling images using width & height instead of Transform Matrix
+ // because of quality loss
+ var c = mc(this.rotation_);
+ var c = mc(this.rotation_);
+ var s = ms(this.rotation_);
+
+
+ // Inverse rotation matrix
+ var irm = [
+ [c, -s, 0],
+ [s, c, 0],
+ [c, -s, 0],
+ [s, c, 0],
+ [0, 0, 1]
+ ];
+
+ ];
+
+ // Get unrotated matrix to get only scaling values
+ var urm = matrixMultiply(irm, this.m_);
+ var urm = matrixMultiply(irm, this.m_);
+ scaleX = urm[0][0];
+ scaleY = urm[1][1];
+
+
+ // Apply only rotation and translation to Matrix
+ filter.push('M11=', c, ',',
+ 'M12=', -s, ',',
@ -149,25 +149,25 @@ Index: excanvas.js
+ ' filter:progid:DxImageTransform.Microsoft.Matrix(Dx=',
+ -sx * dw / sw * scaleX, ',Dy=', -sy * dh / sh * scaleY, ');">');
+ }
+
+
+
+
+ // Apply scales to width and height
+ vmlStr.push('<div style="width:', Math.round(scaleX * w * dw / sw), 'px;',
+ ' height:', Math.round(scaleY * h * dh / sh), 'px;',
+ ' filter:');
+
+
+ // If there is a globalAlpha, apply it to image
+ if(this.globalAlpha < 1) {
+ vmlStr.push(' progid:DXImageTransform.Microsoft.Alpha(opacity=' + (this.globalAlpha * 100) + ')');
+ }
+
+
+ vmlStr.push(' progid:DXImageTransform.Microsoft.AlphaImageLoader(src=', image.src, ',sizingMethod=scale)">');
+
+ // Close the crop div if necessary
+
+ // Close the crop div if necessary
+ if (sx || sy) vmlStr.push('</div>');
+
+
+ vmlStr.push('</div></div>');
+
+
+ this.element_.insertAdjacentHTML('beforeEnd', vmlStr.join(''));
};
@ -176,8 +176,8 @@ Index: excanvas.js
var c = mc(aRot);
var s = ms(aRot);
+ this.rotation_ += aRot;
+
+ this.rotation_ += aRot;
+
var m1 = [
[c, s, 0],
[-s, c, 0],
@ -188,7 +188,7 @@ Index: excanvas.js
- this.textMeasureEl_.style.font = this.font;
+ // FIX: Apply current font style to textMeasureEl to get correct size
+ var fontStyle = getComputedStyle(processFontStyle(this.font), this.element_),
+ fontStyleString = buildStyle(fontStyle);
+ fontStyleString = buildStyle(fontStyle);
+ this.textMeasureEl_.style.font = fontStyleString;
+
// Don't use innerHTML or innerText because they allow markup/whitespace.

56
lib/excanvas.js
View file

@ -253,7 +253,7 @@ if (!document.createElement('canvas').getContext) {
o2.arcScaleX_ = o1.arcScaleX_;
o2.arcScaleY_ = o1.arcScaleY_;
o2.lineScale_ = o1.lineScale_;
o2.rotation_ = o1.rotation_; // used for images
o2.rotation_ = o1.rotation_; // used for images
}
var colorData = {
@ -604,7 +604,7 @@ if (!document.createElement('canvas').getContext) {
this.arcScaleX_ = 1;
this.arcScaleY_ = 1;
this.lineScale_ = 1;
this.rotation_ = 0;
this.rotation_ = 0;
}
var contextPrototype = CanvasRenderingContext2D_.prototype;
@ -771,29 +771,29 @@ if (!document.createElement('canvas').getContext) {
contextPrototype.drawImage = function(image) {
var dx, dy, dw, dh, sx, sy, sw, sh;
// to fix new Image() we check the existance of runtimeStyle
var rts = image.runtimeStyle.width;
// to find the original width we overide the width and height
if(rts) {
var oldRuntimeWidth = image.runtimeStyle.width;
var oldRuntimeHeight = image.runtimeStyle.height;
image.runtimeStyle.width = 'auto';
image.runtimeStyle.height = 'auto';
image.runtimeStyle.height = 'auto';
}
// get the original size
var w = image.width;
var h = image.height;
// and remove overides
if(rts) {
image.runtimeStyle.width = oldRuntimeWidth;
image.runtimeStyle.height = oldRuntimeHeight;
image.runtimeStyle.height = oldRuntimeHeight;
}
if (arguments.length == 3) {
dx = arguments[1];
dy = arguments[2];
@ -830,9 +830,9 @@ if (!document.createElement('canvas').getContext) {
var W = 10;
var H = 10;
var scaleX = scaleY = 1;
// FIX: divs give better quality then vml image and also fixes transparent PNG's
vmlStr.push(' <div style="position:absolute;');
@ -846,21 +846,21 @@ if (!document.createElement('canvas').getContext) {
// Scaling images using width & height instead of Transform Matrix
// because of quality loss
var c = mc(this.rotation_);
var c = mc(this.rotation_);
var s = ms(this.rotation_);
// Inverse rotation matrix
var irm = [
[c, -s, 0],
[s, c, 0],
[0, 0, 1]
];
];
// Get unrotated matrix to get only scaling values
var urm = matrixMultiply(irm, this.m_);
var urm = matrixMultiply(irm, this.m_);
scaleX = urm[0][0];
scaleY = urm[1][1];
// Apply only rotation and translation to Matrix
filter.push('M11=', c, ',',
'M12=', -s, ',',
@ -896,25 +896,25 @@ if (!document.createElement('canvas').getContext) {
' filter:progid:DxImageTransform.Microsoft.Matrix(Dx=',
-sx * dw / sw * scaleX, ',Dy=', -sy * dh / sh * scaleY, ');">');
}
// Apply scales to width and height
vmlStr.push('<div style="width:', Math.round(scaleX * w * dw / sw), 'px;',
' height:', Math.round(scaleY * h * dh / sh), 'px;',
' filter:');
// If there is a globalAlpha, apply it to image
if(this.globalAlpha < 1) {
vmlStr.push(' progid:DXImageTransform.Microsoft.Alpha(opacity=' + (this.globalAlpha * 100) + ')');
}
vmlStr.push(' progid:DXImageTransform.Microsoft.AlphaImageLoader(src=', image.src, ',sizingMethod=scale)">');
// Close the crop div if necessary
// Close the crop div if necessary
if (sx || sy) vmlStr.push('</div>');
vmlStr.push('</div></div>');
this.element_.insertAdjacentHTML('beforeEnd', vmlStr.join(''));
};
@ -1198,8 +1198,8 @@ if (!document.createElement('canvas').getContext) {
var c = mc(aRot);
var s = ms(aRot);
this.rotation_ += aRot;
this.rotation_ += aRot;
var m1 = [
[c, s, 0],
[-s, c, 0],
@ -1355,7 +1355,7 @@ if (!document.createElement('canvas').getContext) {
this.textMeasureEl_.innerHTML = '';
// FIX: Apply current font style to textMeasureEl to get correct size
var fontStyle = getComputedStyle(processFontStyle(this.font), this.element_),
fontStyleString = buildStyle(fontStyle);
fontStyleString = buildStyle(fontStyle);
this.textMeasureEl_.style.font = fontStyleString;
// Don't use innerHTML or innerText because they allow markup/whitespace.

30
test/lib/event.simulate.js
View file

@ -1,6 +1,6 @@
/**
* simulateEvent(@element, eventName[, options]) -> Element
*
*
* - @element: element to fire event on
* - eventName: name of event to fire (only MouseEvents and HTMLEvents interfaces are supported)
* - options: optional object to fine-tune event properties - pointerX, pointerY, ctrlKey, etc.
@ -29,44 +29,44 @@
bubbles: true,
cancelable: true
};
global.simulateEvent = function(element, eventName) {
var options = extendObject(extendObject({ }, defaultOptions), arguments[2] || { }),
oEvent,
oEvent,
eventType;
element = typeof element == 'string' ? document.getElementById(element) : element;
for (var name in eventMatchers) {
if (eventMatchers[name].test(eventName)) {
eventType = name;
break;
eventType = name;
break;
}
}
if (!eventType) {
throw new SyntaxError('This event is not supported');
}
if (document.createEvent) {
try {
// Opera doesn't support event types like "KeyboardEvent",
// Opera doesn't support event types like "KeyboardEvent",
// but allows to create event of type "HTMLEvents", then fire key event on it
oEvent = document.createEvent(eventType);
}
catch(err) {
oEvent = document.createEvent('HTMLEvents');
}
if (eventType == 'HTMLEvents') {
oEvent.initEvent(eventName, options.bubbles, options.cancelable);
}
else if (eventType === 'KeyboardEvent') {
// TODO (kangax): this needs to be tested
if (oEvent.initKeyEvent) {
oEvent.initKeyEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.keyCode,
oEvent.initKeyEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.keyCode,
options.charCode);
}
else if (oEvent.initEvent) {
@ -74,7 +74,7 @@
}
}
else {
oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
}