保持恒定的图像笔触时出现歪斜问题

Question

我正在一个项目中，可以将图像以各种分辨率添加到FabricJS画布上。由于Fabric处理笔触宽度的方式，图像大小的这种差异会导致笔触的渲染不一致。

从byoungb's solution借来保持不变的笔划宽度，我设法通过覆盖_renderStroke和{{来使图像边界保持视觉上一致，并具有正确的控制/边界位置。 _getTransformedDimensions类的1}}方法。但是，这在图像倾斜的情况下会分解，并且在存在倾斜的情况下，我似乎无法确定正确的位置来修改对象尺寸计算（我希望我需要修改Image方法_calcDimensionsTransformMatrix，但到目前为止没有成功。

http://jsfiddle.net/melchiar/bt4ckmea/（边界矩形以黑色显示）

Image

Answer 1

我最终找到了解决方案。可以通过修改在_getTransformedDimensions方法末尾返回的bbox值来固定具有修改的笔划的倾斜对象的边界框大小。

http://jsfiddle.net/melchiar/6Ljguz7k/

//override stroke rendering for constant stroke width independent of scaling
fabric.Image.prototype._renderStroke = function(ctx) {
  if (!this.stroke || this.strokeWidth === 0) {
    return;
  }
  if (this.shadow && !this.shadow.affectStroke) {
    this._removeShadow(ctx);
  }
  ctx.save();
  ctx.scale(1 / this.scaleX, 1 / this.scaleY);
  this._setLineDash(ctx, this.strokeDashArray, this._renderDashedStroke);
  this._applyPatternGradientTransform(ctx, this.stroke);
  ctx.stroke();
  ctx.restore();
};

//modify method for calculating control and bounding box positions
fabric.Image.prototype._getTransformedDimensions = function(skewX, skewY) {
  if (typeof skewX === 'undefined') {
    skewX = this.skewX;
  }
  if (typeof skewY === 'undefined') {
    skewY = this.skewY;
  }
  var dimensions = this._getNonTransformedDimensions();
  if (skewX === 0 && skewY === 0) {
    return {
      x: dimensions.x * this.scaleX + (this.strokeWidth * (1 - this.scaleX)),
      y: dimensions.y * this.scaleY + (this.strokeWidth * (1 - this.scaleY))
    };
  }
  var dimX = dimensions.x / 2,
    dimY = dimensions.y / 2,
    points = [{
        x: -dimX,
        y: -dimY
      },
      {
        x: dimX,
        y: -dimY
      },
      {
        x: -dimX,
        y: dimY
      },
      {
        x: dimX,
        y: dimY
      }
    ],
    i, transformMatrix = this._calcDimensionsTransformMatrix(skewX, skewY, false),
    bbox;
  for (i = 0; i < points.length; i++) {
    points[i] = fabric.util.transformPoint(points[i], transformMatrix);
  }
  bbox = fabric.util.makeBoundingBoxFromPoints(points);
  return {
    x: bbox.width + (this.strokeWidth * (1 - this.scaleX)),
    y: bbox.height + (this.strokeWidth * (1 - this.scaleY))
  };
};