fabric-rails 1.0.12 → 1.0.12.1

data/vendor/assets/javascripts/fabric/object_geometry.mixin.js

@@ -0,0 +1,308 @@
+(function() {
+
+  var degreesToRadians = fabric.util.degreesToRadians;
+
+  fabric.util.object.extend(fabric.Object.prototype, /** @scope fabric.Object.prototype */ {
+
+    /**
+     * Returns true if object intersects with an area formed by 2 points
+     * @method intersectsWithRect
+     * @param {Object} selectionTL
+     * @param {Object} selectionBR
+     * @return {Boolean}
+     */
+    intersectsWithRect: function(selectionTL, selectionBR) {
+      var oCoords = this.oCoords,
+          tl = new fabric.Point(oCoords.tl.x, oCoords.tl.y),
+          tr = new fabric.Point(oCoords.tr.x, oCoords.tr.y),
+          bl = new fabric.Point(oCoords.bl.x, oCoords.bl.y),
+          br = new fabric.Point(oCoords.br.x, oCoords.br.y);
+
+      var intersection = fabric.Intersection.intersectPolygonRectangle(
+        [tl, tr, br, bl],
+        selectionTL,
+        selectionBR
+      );
+      return intersection.status === 'Intersection';
+    },
+
+    /**
+     * Returns true if object intersects with another object
+     * @method intersectsWithObject
+     * @param {Object} other Object to test
+     * @return {Boolean}
+     */
+    intersectsWithObject: function(other) {
+      // extracts coords
+      function getCoords(oCoords) {
+        return {
+          tl: new fabric.Point(oCoords.tl.x, oCoords.tl.y),
+          tr: new fabric.Point(oCoords.tr.x, oCoords.tr.y),
+          bl: new fabric.Point(oCoords.bl.x, oCoords.bl.y),
+          br: new fabric.Point(oCoords.br.x, oCoords.br.y)
+        };
+      }
+      var thisCoords = getCoords(this.oCoords),
+          otherCoords = getCoords(other.oCoords);
+
+      var intersection = fabric.Intersection.intersectPolygonPolygon(
+        [thisCoords.tl, thisCoords.tr, thisCoords.br, thisCoords.bl],
+        [otherCoords.tl, otherCoords.tr, otherCoords.br, otherCoords.bl]
+      );
+
+      return intersection.status === 'Intersection';
+    },
+
+    /**
+     * Returns true if object is fully contained within area of another object
+     * @method isContainedWithinObject
+     * @param {Object} other Object to test
+     * @return {Boolean}
+     */
+    isContainedWithinObject: function(other) {
+      return this.isContainedWithinRect(other.oCoords.tl, other.oCoords.br);
+    },
+
+    /**
+     * Returns true if object is fully contained within area formed by 2 points
+     * @method isContainedWithinRect
+     * @param {Object} selectionTL
+     * @param {Object} selectionBR
+     * @return {Boolean}
+     */
+    isContainedWithinRect: function(selectionTL, selectionBR) {
+      var oCoords = this.oCoords,
+          tl = new fabric.Point(oCoords.tl.x, oCoords.tl.y),
+          tr = new fabric.Point(oCoords.tr.x, oCoords.tr.y),
+          bl = new fabric.Point(oCoords.bl.x, oCoords.bl.y);
+
+      return tl.x > selectionTL.x
+        && tr.x < selectionBR.x
+        && tl.y > selectionTL.y
+        && bl.y < selectionBR.y;
+    },
+
+    /**
+     * Returns width of an object's bounding rectangle
+     * @deprecated since 1.0.4
+     * @method getBoundingRectWidth
+     * @return {Number} width value
+     */
+    getBoundingRectWidth: function() {
+      return this.getBoundingRect().width;
+    },
+
+    /**
+     * Returns height of an object's bounding rectangle
+     * @deprecated since 1.0.4
+     * @method getBoundingRectHeight
+     * @return {Number} height value
+     */
+    getBoundingRectHeight: function() {
+      return this.getBoundingRect().height;
+    },
+
+    /**
+     * Returns coordinates of object's bounding rectangle (left, top, width, height)
+     * @method getBoundingRect
+     * @return {Object} Object with left, top, width, height properties
+     */
+    getBoundingRect: function() {
+      this.oCoords || this.setCoords();
+
+      var xCoords = [this.oCoords.tl.x, this.oCoords.tr.x, this.oCoords.br.x, this.oCoords.bl.x];
+      var minX = fabric.util.array.min(xCoords);
+      var maxX = fabric.util.array.max(xCoords);
+      var width = Math.abs(minX - maxX);
+
+      var yCoords = [this.oCoords.tl.y, this.oCoords.tr.y, this.oCoords.br.y, this.oCoords.bl.y];
+      var minY = fabric.util.array.min(yCoords);
+      var maxY = fabric.util.array.max(yCoords);
+      var height = Math.abs(minY - maxY);
+
+      return {
+        left: minX,
+        top: minY,
+        width: width,
+        height: height
+      };
+    },
+
+    /**
+     * Returns width of an object
+     * @method getWidth
+     * @return {Number} width value
+     */
+    getWidth: function() {
+      return this.width * this.scaleX;
+    },
+
+    /**
+     * Returns height of an object
+     * @method getHeight
+     * @return {Number} height value
+     */
+    getHeight: function() {
+      return this.height * this.scaleY;
+    },
+
+    /**
+     * Makes sure the scale is valid and modifies it if necessary
+     * @private
+     * @method _constrainScale
+     * @param {Number} value
+     * @return {Number}
+     */
+    _constrainScale: function(value) {
+      if (Math.abs(value) < this.minScaleLimit) {
+        if (value < 0)
+          return -this.minScaleLimit;
+        else
+          return this.minScaleLimit;
+      }
+
+      return value;
+    },
+
+    /**
+     * Scales an object (equally by x and y)
+     * @method scale
+     * @param value {Number} scale factor
+     * @return {fabric.Object} thisArg
+     * @chainable
+     */
+    scale: function(value) {
+      value = this._constrainScale(value);
+
+      if (value < 0) {
+        this.flipX = !this.flipX;
+        this.flipY = !this.flipY;
+        value *= -1;
+      }
+
+      this.scaleX = value;
+      this.scaleY = value;
+      this.setCoords();
+      return this;
+    },
+
+    /**
+     * Scales an object to a given width, with respect to bounding box (scaling by x/y equally)
+     * @method scaleToWidth
+     * @param value {Number} new width value
+     * @return {fabric.Object} thisArg
+     * @chainable
+     */
+    scaleToWidth: function(value) {
+      // adjust to bounding rect factor so that rotated shapes would fit as well
+      var boundingRectFactor = this.getBoundingRectWidth() / this.getWidth();
+      return this.scale(value / this.width / boundingRectFactor);
+    },
+
+    /**
+     * Scales an object to a given height, with respect to bounding box (scaling by x/y equally)
+     * @method scaleToHeight
+     * @param value {Number} new height value
+     * @return {fabric.Object} thisArg
+     * @chainable
+     */
+    scaleToHeight: function(value) {
+      // adjust to bounding rect factor so that rotated shapes would fit as well
+      var boundingRectFactor = this.getBoundingRectHeight() / this.getHeight();
+      return this.scale(value / this.height / boundingRectFactor);
+    },
+
+    /**
+     * Sets corner position coordinates based on current angle, width and height
+     * @method setCoords
+     * @return {fabric.Object} thisArg
+     * @chainable
+     */
+    setCoords: function() {
+
+      var strokeWidth = this.strokeWidth > 1 ? this.strokeWidth : 0,
+          padding = this.padding,
+          theta = degreesToRadians(this.angle);
+
+      this.currentWidth = (this.width + strokeWidth) * this.scaleX + padding * 2;
+      this.currentHeight = (this.height + strokeWidth) * this.scaleY + padding * 2;
+
+      // If width is negative, make postive. Fixes path selection issue
+      if (this.currentWidth < 0) {
+        this.currentWidth = Math.abs(this.currentWidth);
+      }
+
+      var _hypotenuse = Math.sqrt(
+        Math.pow(this.currentWidth / 2, 2) +
+        Math.pow(this.currentHeight / 2, 2));
+
+      var _angle = Math.atan(this.currentHeight / this.currentWidth);
+
+      // offset added for rotate and scale actions
+      var offsetX = Math.cos(_angle + theta) * _hypotenuse,
+          offsetY = Math.sin(_angle + theta) * _hypotenuse,
+          sinTh = Math.sin(theta),
+          cosTh = Math.cos(theta);
+
+      var coords = this.getCenterPoint();
+      var tl = {
+        x: coords.x - offsetX,
+        y: coords.y - offsetY
+      };
+      var tr = {
+        x: tl.x + (this.currentWidth * cosTh),
+        y: tl.y + (this.currentWidth * sinTh)
+      };
+      var br = {
+        x: tr.x - (this.currentHeight * sinTh),
+        y: tr.y + (this.currentHeight * cosTh)
+      };
+      var bl = {
+        x: tl.x - (this.currentHeight * sinTh),
+        y: tl.y + (this.currentHeight * cosTh)
+      };
+      var ml = {
+        x: tl.x - (this.currentHeight/2 * sinTh),
+        y: tl.y + (this.currentHeight/2 * cosTh)
+      };
+      var mt = {
+        x: tl.x + (this.currentWidth/2 * cosTh),
+        y: tl.y + (this.currentWidth/2 * sinTh)
+      };
+      var mr = {
+        x: tr.x - (this.currentHeight/2 * sinTh),
+        y: tr.y + (this.currentHeight/2 * cosTh)
+      };
+      var mb = {
+        x: bl.x + (this.currentWidth/2 * cosTh),
+        y: bl.y + (this.currentWidth/2 * sinTh)
+      };
+      var mtr = {
+        x: tl.x + (this.currentWidth/2 * cosTh),
+        y: tl.y + (this.currentWidth/2 * sinTh)
+      };
+
+      // debugging
+
+      // setTimeout(function() {
+      //   canvas.contextTop.fillStyle = 'green';
+      //   canvas.contextTop.fillRect(mb.x, mb.y, 3, 3);
+      //   canvas.contextTop.fillRect(bl.x, bl.y, 3, 3);
+      //   canvas.contextTop.fillRect(br.x, br.y, 3, 3);
+      //   canvas.contextTop.fillRect(tl.x, tl.y, 3, 3);
+      //   canvas.contextTop.fillRect(tr.x, tr.y, 3, 3);
+      //   canvas.contextTop.fillRect(ml.x, ml.y, 3, 3);
+      //   canvas.contextTop.fillRect(mr.x, mr.y, 3, 3);
+      //   canvas.contextTop.fillRect(mt.x, mt.y, 3, 3);
+      // }, 50);
+
+      // clockwise
+      this.oCoords = { tl: tl, tr: tr, br: br, bl: bl, ml: ml, mt: mt, mr: mr, mb: mb, mtr: mtr };
+
+      // set coordinates of the draggable boxes in the corners used to scale/rotate the image
+      this._setCornerCoords();
+
+      return this;
+    }
+  });
+})();

data/vendor/assets/javascripts/fabric/object_interactivity.mixin.js

@@ -0,0 +1,496 @@
+(function(){
+
+  var getPointer = fabric.util.getPointer,
+      degreesToRadians = fabric.util.degreesToRadians;
+
+  fabric.util.object.extend(fabric.Object.prototype, /** @scope fabric.Object.prototype */ {
+
+    /**
+     * Determines which one of the four corners has been clicked
+     * @method _findTargetCorner
+     * @private
+     * @param e {Event} event object
+     * @param offset {Object} canvas offset
+     * @return {String|Boolean} corner code (tl, tr, bl, br, etc.), or false if nothing is found
+     */
+    _findTargetCorner: function(e, offset) {
+      if (!this.hasControls || !this.active) return false;
+
+      var pointer = getPointer(e, this.canvas.upperCanvasEl),
+          ex = pointer.x - offset.left,
+          ey = pointer.y - offset.top,
+          xpoints,
+          lines;
+
+      for (var i in this.oCoords) {
+
+        if (i === 'mtr' && !this.hasRotatingPoint) {
+          continue;
+        }
+
+        if (this.get('lockUniScaling') && (i === 'mt' || i === 'mr' || i === 'mb' || i === 'ml')) {
+          continue;
+        }
+
+        lines = this._getImageLines(this.oCoords[i].corner, i);
+
+        // debugging
+
+        // canvas.contextTop.fillRect(lines.bottomline.d.x, lines.bottomline.d.y, 2, 2);
+        // canvas.contextTop.fillRect(lines.bottomline.o.x, lines.bottomline.o.y, 2, 2);
+
+        // canvas.contextTop.fillRect(lines.leftline.d.x, lines.leftline.d.y, 2, 2);
+        // canvas.contextTop.fillRect(lines.leftline.o.x, lines.leftline.o.y, 2, 2);
+
+        // canvas.contextTop.fillRect(lines.topline.d.x, lines.topline.d.y, 2, 2);
+        // canvas.contextTop.fillRect(lines.topline.o.x, lines.topline.o.y, 2, 2);
+
+        // canvas.contextTop.fillRect(lines.rightline.d.x, lines.rightline.d.y, 2, 2);
+        // canvas.contextTop.fillRect(lines.rightline.o.x, lines.rightline.o.y, 2, 2);
+
+        xpoints = this._findCrossPoints(ex, ey, lines);
+        if (xpoints % 2 === 1 && xpoints !== 0) {
+          this.__corner = i;
+          return i;
+        }
+      }
+      return false;
+    },
+
+    /**
+     * Helper method to determine how many cross points are between the 4 image edges
+     * and the horizontal line determined by the position of our mouse when clicked on canvas
+     * @method _findCrossPoints
+     * @private
+     * @param ex {Number} x coordinate of the mouse
+     * @param ey {Number} y coordinate of the mouse
+     * @param oCoords {Object} Coordinates of the image being evaluated
+     */
+    _findCrossPoints: function(ex, ey, oCoords) {
+      var b1, b2, a1, a2, xi, yi,
+          xcount = 0,
+          iLine;
+
+      for (var lineKey in oCoords) {
+        iLine = oCoords[lineKey];
+        // optimisation 1: line below dot. no cross
+        if ((iLine.o.y < ey) && (iLine.d.y < ey)) {
+          continue;
+        }
+        // optimisation 2: line above dot. no cross
+        if ((iLine.o.y >= ey) && (iLine.d.y >= ey)) {
+          continue;
+        }
+        // optimisation 3: vertical line case
+        if ((iLine.o.x === iLine.d.x) && (iLine.o.x >= ex)) {
+          xi = iLine.o.x;
+          yi = ey;
+        }
+        // calculate the intersection point
+        else {
+          b1 = 0;
+          b2 = (iLine.d.y-iLine.o.y)/(iLine.d.x-iLine.o.x);
+          a1 = ey-b1*ex;
+          a2 = iLine.o.y-b2*iLine.o.x;
+
+          xi = - (a1-a2)/(b1-b2);
+          yi = a1+b1*xi;
+        }
+        // dont count xi < ex cases
+        if (xi >= ex) {
+          xcount += 1;
+        }
+        // optimisation 4: specific for square images
+        if (xcount === 2) {
+          break;
+        }
+      }
+      return xcount;
+    },
+
+    /**
+     * Method that returns an object with the image lines in it given the coordinates of the corners
+     * @method _getImageLines
+     * @private
+     * @param oCoords {Object} coordinates of the image corners
+     */
+    _getImageLines: function(oCoords) {
+      return {
+        topline: {
+          o: oCoords.tl,
+          d: oCoords.tr
+        },
+        rightline: {
+          o: oCoords.tr,
+          d: oCoords.br
+        },
+        bottomline: {
+          o: oCoords.br,
+          d: oCoords.bl
+        },
+        leftline: {
+          o: oCoords.bl,
+          d: oCoords.tl
+        }
+      };
+    },
+
+    /**
+     * Sets the coordinates of the draggable boxes in the corners of
+     * the image used to scale/rotate it.
+     * @method _setCornerCoords
+     * @private
+     */
+    _setCornerCoords: function() {
+      var coords = this.oCoords,
+          theta = degreesToRadians(this.angle),
+          newTheta = degreesToRadians(45 - this.angle),
+          cornerHypotenuse = Math.sqrt(2 * Math.pow(this.cornerSize, 2)) / 2,
+          cosHalfOffset = cornerHypotenuse * Math.cos(newTheta),
+          sinHalfOffset = cornerHypotenuse * Math.sin(newTheta),
+          sinTh = Math.sin(theta),
+          cosTh = Math.cos(theta);
+
+      coords.tl.corner = {
+        tl: {
+          x: coords.tl.x - sinHalfOffset,
+          y: coords.tl.y - cosHalfOffset
+        },
+        tr: {
+          x: coords.tl.x + cosHalfOffset,
+          y: coords.tl.y - sinHalfOffset
+        },
+        bl: {
+          x: coords.tl.x - cosHalfOffset,
+          y: coords.tl.y + sinHalfOffset
+        },
+        br: {
+          x: coords.tl.x + sinHalfOffset,
+          y: coords.tl.y + cosHalfOffset
+        }
+      };
+
+      coords.tr.corner = {
+        tl: {
+          x: coords.tr.x - sinHalfOffset,
+          y: coords.tr.y - cosHalfOffset
+        },
+        tr: {
+          x: coords.tr.x + cosHalfOffset,
+          y: coords.tr.y - sinHalfOffset
+        },
+        br: {
+          x: coords.tr.x + sinHalfOffset,
+          y: coords.tr.y + cosHalfOffset
+        },
+        bl: {
+          x: coords.tr.x - cosHalfOffset,
+          y: coords.tr.y + sinHalfOffset
+        }
+      };
+
+      coords.bl.corner = {
+        tl: {
+          x: coords.bl.x - sinHalfOffset,
+          y: coords.bl.y - cosHalfOffset
+        },
+        bl: {
+          x: coords.bl.x - cosHalfOffset,
+          y: coords.bl.y + sinHalfOffset
+        },
+        br: {
+          x: coords.bl.x + sinHalfOffset,
+          y: coords.bl.y + cosHalfOffset
+        },
+        tr: {
+          x: coords.bl.x + cosHalfOffset,
+          y: coords.bl.y - sinHalfOffset
+        }
+      };
+
+      coords.br.corner = {
+        tr: {
+          x: coords.br.x + cosHalfOffset,
+          y: coords.br.y - sinHalfOffset
+        },
+        bl: {
+          x: coords.br.x - cosHalfOffset,
+          y: coords.br.y + sinHalfOffset
+        },
+        br: {
+          x: coords.br.x + sinHalfOffset,
+          y: coords.br.y + cosHalfOffset
+        },
+        tl: {
+          x: coords.br.x - sinHalfOffset,
+          y: coords.br.y - cosHalfOffset
+        }
+      };
+
+      coords.ml.corner = {
+        tl: {
+          x: coords.ml.x - sinHalfOffset,
+          y: coords.ml.y - cosHalfOffset
+        },
+        tr: {
+          x: coords.ml.x + cosHalfOffset,
+          y: coords.ml.y - sinHalfOffset
+        },
+        bl: {
+          x: coords.ml.x - cosHalfOffset,
+          y: coords.ml.y + sinHalfOffset
+        },
+        br: {
+          x: coords.ml.x + sinHalfOffset,
+          y: coords.ml.y + cosHalfOffset
+        }
+      };
+
+      coords.mt.corner = {
+        tl: {
+          x: coords.mt.x - sinHalfOffset,
+          y: coords.mt.y - cosHalfOffset
+        },
+        tr: {
+          x: coords.mt.x + cosHalfOffset,
+          y: coords.mt.y - sinHalfOffset
+        },
+        bl: {
+          x: coords.mt.x - cosHalfOffset,
+          y: coords.mt.y + sinHalfOffset
+        },
+        br: {
+          x: coords.mt.x + sinHalfOffset,
+          y: coords.mt.y + cosHalfOffset
+        }
+      };
+
+      coords.mr.corner = {
+        tl: {
+          x: coords.mr.x - sinHalfOffset,
+          y: coords.mr.y - cosHalfOffset
+        },
+        tr: {
+          x: coords.mr.x + cosHalfOffset,
+          y: coords.mr.y - sinHalfOffset
+        },
+        bl: {
+          x: coords.mr.x - cosHalfOffset,
+          y: coords.mr.y + sinHalfOffset
+        },
+        br: {
+          x: coords.mr.x + sinHalfOffset,
+          y: coords.mr.y + cosHalfOffset
+        }
+      };
+
+      coords.mb.corner = {
+        tl: {
+          x: coords.mb.x - sinHalfOffset,
+          y: coords.mb.y - cosHalfOffset
+        },
+        tr: {
+          x: coords.mb.x + cosHalfOffset,
+          y: coords.mb.y - sinHalfOffset
+        },
+        bl: {
+          x: coords.mb.x - cosHalfOffset,
+          y: coords.mb.y + sinHalfOffset
+        },
+        br: {
+          x: coords.mb.x + sinHalfOffset,
+          y: coords.mb.y + cosHalfOffset
+        }
+      };
+
+      coords.mtr.corner = {
+        tl: {
+          x: coords.mtr.x - sinHalfOffset + (sinTh * this.rotatingPointOffset),
+          y: coords.mtr.y - cosHalfOffset - (cosTh * this.rotatingPointOffset)
+        },
+        tr: {
+          x: coords.mtr.x + cosHalfOffset + (sinTh * this.rotatingPointOffset),
+          y: coords.mtr.y - sinHalfOffset - (cosTh * this.rotatingPointOffset)
+        },
+        bl: {
+          x: coords.mtr.x - cosHalfOffset + (sinTh * this.rotatingPointOffset),
+          y: coords.mtr.y + sinHalfOffset - (cosTh * this.rotatingPointOffset)
+        },
+        br: {
+          x: coords.mtr.x + sinHalfOffset + (sinTh * this.rotatingPointOffset),
+          y: coords.mtr.y + cosHalfOffset - (cosTh * this.rotatingPointOffset)
+        }
+      };
+    },
+    /**
+     * Draws borders of an object's bounding box.
+     * Requires public properties: width, height
+     * Requires public options: padding, borderColor
+     * @method drawBorders
+     * @param {CanvasRenderingContext2D} ctx Context to draw on
+     * @return {fabric.Object} thisArg
+     * @chainable
+     */
+    drawBorders: function(ctx) {
+      if (!this.hasBorders) return;
+
+      var padding = this.padding,
+          padding2 = padding * 2,
+          strokeWidth = this.strokeWidth > 1 ? this.strokeWidth : 0;
+
+      ctx.save();
+
+      ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
+      ctx.strokeStyle = this.borderColor;
+
+      var scaleX = 1 / this._constrainScale(this.scaleX),
+          scaleY = 1 / this._constrainScale(this.scaleY);
+
+      ctx.lineWidth = 1 / this.borderScaleFactor;
+
+      ctx.scale(scaleX, scaleY);
+
+      var w = this.getWidth(),
+          h = this.getHeight();
+
+      ctx.strokeRect(
+        ~~(-(w / 2) - padding - strokeWidth / 2 * this.scaleX) + 0.5, // offset needed to make lines look sharper
+        ~~(-(h / 2) - padding - strokeWidth / 2 * this.scaleY) + 0.5,
+        ~~(w + padding2 + strokeWidth * this.scaleX),
+        ~~(h + padding2 + strokeWidth * this.scaleY)
+      );
+
+      if (this.hasRotatingPoint && !this.get('lockRotation') && this.hasControls) {
+
+        var rotateHeight = (
+          this.flipY
+            ? h + (strokeWidth * this.scaleY) + (padding * 2)
+            : -h - (strokeWidth * this.scaleY) - (padding * 2)
+        ) / 2;
+
+        ctx.beginPath();
+        ctx.moveTo(0, rotateHeight);
+        ctx.lineTo(0, rotateHeight + (this.flipY ? this.rotatingPointOffset : -this.rotatingPointOffset));
+        ctx.closePath();
+        ctx.stroke();
+      }
+
+      ctx.restore();
+      return this;
+    },
+
+    /**
+     * Draws corners of an object's bounding box.
+     * Requires public properties: width, height, scaleX, scaleY
+     * Requires public options: cornerSize, padding
+     * @method drawControls
+     * @param {CanvasRenderingContext2D} ctx Context to draw on
+     * @return {fabric.Object} thisArg
+     * @chainable
+     */
+    drawControls: function(ctx) {
+      if (!this.hasControls) return;
+
+      var size = this.cornerSize,
+          size2 = size / 2,
+          strokeWidth2 = this.strokeWidth / 2,
+          left = -(this.width / 2),
+          top = -(this.height / 2),
+          _left,
+          _top,
+          sizeX = size / this.scaleX,
+          sizeY = size / this.scaleY,
+          paddingX = this.padding / this.scaleX,
+          paddingY = this.padding / this.scaleY,
+          scaleOffsetY = size2 / this.scaleY,
+          scaleOffsetX = size2 / this.scaleX,
+          scaleOffsetSizeX = (size2 - size) / this.scaleX,
+          scaleOffsetSizeY = (size2 - size) / this.scaleY,
+          height = this.height,
+          width = this.width,
+          methodName = this.transparentCorners ? 'strokeRect' : 'fillRect',
+          isVML = typeof G_vmlCanvasManager !== 'undefined';
+
+      ctx.save();
+
+      ctx.lineWidth = 1 / Math.max(this.scaleX, this.scaleY);
+
+      ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
+      ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
+
+      // top-left
+      _left = left - scaleOffsetX - strokeWidth2 - paddingX;
+      _top = top - scaleOffsetY - strokeWidth2 - paddingY;
+
+      isVML || ctx.clearRect(_left, _top, sizeX, sizeY);
+      ctx[methodName](_left, _top, sizeX, sizeY);
+
+      // top-right
+      _left = left + width - scaleOffsetX + strokeWidth2 + paddingX;
+      _top = top - scaleOffsetY - strokeWidth2 - paddingY;
+
+      isVML || ctx.clearRect(_left, _top, sizeX, sizeY);
+      ctx[methodName](_left, _top, sizeX, sizeY);
+
+      // bottom-left
+      _left = left - scaleOffsetX - strokeWidth2 - paddingX;
+      _top = top + height + scaleOffsetSizeY + strokeWidth2 + paddingY;
+
+      isVML || ctx.clearRect(_left, _top, sizeX, sizeY);
+      ctx[methodName](_left, _top, sizeX, sizeY);
+
+      // bottom-right
+      _left = left + width + scaleOffsetSizeX + strokeWidth2 + paddingX;
+      _top = top + height + scaleOffsetSizeY + strokeWidth2 + paddingY;
+
+      isVML || ctx.clearRect(_left, _top, sizeX, sizeY);
+      ctx[methodName](_left, _top, sizeX, sizeY);
+
+      if (!this.get('lockUniScaling')) {
+        // middle-top
+        _left = left + width/2 - scaleOffsetX;
+        _top = top - scaleOffsetY - strokeWidth2 - paddingY;
+
+        isVML || ctx.clearRect(_left, _top, sizeX, sizeY);
+        ctx[methodName](_left, _top, sizeX, sizeY);
+
+        // middle-bottom
+        _left = left + width/2 - scaleOffsetX;
+        _top = top + height + scaleOffsetSizeY + strokeWidth2 + paddingY;
+
+        isVML || ctx.clearRect(_left, _top, sizeX, sizeY);
+        ctx[methodName](_left, _top, sizeX, sizeY);
+
+        // middle-right
+        _left = left + width + scaleOffsetSizeX + strokeWidth2 + paddingX;
+        _top = top + height/2 - scaleOffsetY;
+
+        isVML || ctx.clearRect(_left, _top, sizeX, sizeY);
+        ctx[methodName](_left, _top, sizeX, sizeY);
+
+        // middle-left
+        _left = left - scaleOffsetX - strokeWidth2 - paddingX;
+        _top = top + height/2 - scaleOffsetY;
+
+        isVML || ctx.clearRect(_left, _top, sizeX, sizeY);
+        ctx[methodName](_left, _top, sizeX, sizeY);
+      }
+
+      // middle-top-rotate
+      if (this.hasRotatingPoint) {
+
+        _left = left + width/2 - scaleOffsetX;
+        _top = this.flipY ?
+          (top + height + (this.rotatingPointOffset / this.scaleY) - sizeY/2 + strokeWidth2 + paddingY)
+          : (top - (this.rotatingPointOffset / this.scaleY) - sizeY/2 - strokeWidth2 - paddingY);
+
+        isVML || ctx.clearRect(_left, _top, sizeX, sizeY);
+        ctx[methodName](_left, _top, sizeX, sizeY);
+      }
+
+      ctx.restore();
+
+      return this;
+    }
+  });
+})();