计算织物js中的色调旋转

Question

我们如何从正常的色调度值（0-360）计算fabricjs中Hue Rotation Filter中的旋转参数值（-1到1）？

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

Answer 1

旋转是从 -180 到 180，只是为了与对比度和亮度等从 -1 到 1 移动的其他滤镜对称。

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

由于色调旋转矩阵仅由 sin 和 cos 构建，它们是角度的弧度周期函数，因此您不必担心限制。如果你想设置rotation为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中的色调旋转

Calculate hue rotation in fabric js

html5-canvas

fabricjs

fabricjs2