diff --git a/README.md b/README.md index 743fb12e..249eded8 100644 --- a/README.md +++ b/README.md @@ -160,29 +160,29 @@ For example: #### Adding red rectangle to canvas ```html - - - - - - + + + + + + - - + - - + canvas.add(rect); + + + ``` ### Helping Fabric @@ -231,4 +231,3 @@ SOFTWARE. [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/kangax/fabric.js/trend.png)](https://bitdeli.com/free "Bitdeli Badge") - diff --git a/lib/excanvas-diff.patch b/lib/excanvas-diff.patch index 2b7d64cc..37ad3c8b 100644 --- a/lib/excanvas-diff.patch +++ b/lib/excanvas-diff.patch @@ -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('
'); + } -+ -+ ++ ++ + // Apply scales to width and height + vmlStr.push('
'); -+ -+ // Close the crop div if necessary ++ ++ // Close the crop div if necessary + if (sx || sy) vmlStr.push('
'); -+ ++ + vmlStr.push('
'); -+ ++ + 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. diff --git a/lib/excanvas.js b/lib/excanvas.js index a6dceecb..b95043cf 100644 --- a/lib/excanvas.js +++ b/lib/excanvas.js @@ -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('
'); } - - + + // Apply scales to width and height vmlStr.push('
'); - - // Close the crop div if necessary + + // Close the crop div if necessary if (sx || sy) vmlStr.push('
'); - + vmlStr.push('
'); - + 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. diff --git a/test/lib/event.simulate.js b/test/lib/event.simulate.js index 290f873d..74194a8d 100644 --- a/test/lib/event.simulate.js +++ b/test/lib/event.simulate.js @@ -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); }