Question

如何根据正常色调度值（0-360）计算织物中Hue旋转滤波器的旋转参数值（-1到1）？

fabricjs如何计算Hue Rotation过滤器中的旋转值？

Answer 1

旋转从-180到180，仅适用于对比度和亮度等从-1移动到1的其他滤镜。

当fabricjs计算旋转时，乘以Math.PI的旋转值，使其从-1弧度移动到1弧度，使2弧度的完全旋转等于360度。

由于色调旋转矩阵仅使用sin和cos构建，这是弧度角度的周期函数，因此您不必担心限制。如果你想将旋转设置为2很好，你将获得与0相同的结果。旋转3将得到结果等等。

calculateMatrix: function() {
  var rad = this.rotation * Math.PI, cos = Math.cos(rad), sin = Math.sin(rad),
      aThird = 1 / 3, aThirdSqtSin = Math.sqrt(aThird) * sin, OneMinusCos = 1 - cos;
  this.matrix = [
    1, 0, 0, 0, 0,
    0, 1, 0, 0, 0,
    0, 0, 1, 0, 0,
    0, 0, 0, 1, 0
  ];
  this.matrix[0] = cos + OneMinusCos / 3;
  this.matrix[1] = aThird * OneMinusCos - aThirdSqtSin;
  this.matrix[2] = aThird * OneMinusCos + aThirdSqtSin;
  this.matrix[5] = aThird * OneMinusCos + aThirdSqtSin;
  this.matrix[6] = cos + aThird * OneMinusCos;
  this.matrix[7] = aThird * OneMinusCos - aThirdSqtSin;
  this.matrix[10] = aThird * OneMinusCos - aThirdSqtSin;
  this.matrix[11] = aThird * OneMinusCos + aThirdSqtSin;
  this.matrix[12] = cos + aThird * OneMinusCos;
},

所以

filter.rotation = angleInDegree / Math.PI

应该工作

计算织物js中的色调旋转

1 个答案: