html5-canvas - 在织物js中计算色调旋转

Question

我们如何从正常的色调度值（0-360）计算fabricjs中的色调旋转过滤器中的旋转参数值（-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

应该管用