Question

我正在尝试将RGB颜色从蓝色（rgba(0,0,255)）转换为红色（rgba(255,0,0)）JS mouseenter，逐步。

因此，每次鼠标输入一个元素时，它会“增加”其背景颜色，从蓝色变为绿色再变为红色。

使用WIP实时演示：http://codepen.io/enguerranws/pen/ZQOBwe

这是我到目前为止所做的：

function onGridDone(){
  var gridders = document.querySelectorAll('.gridder');
  for(var i = 0; i < gridders.length; i++){
    gridders[i].addEventListener('mouseenter', onHover );
  }  
}
function onHover () {
  var currentColor = this.style.backgroundColor,
      currentColorArr = currentColor.replace(/[^\d,]/g, '').split(',');
      R = currentColorArr[0],
      G = currentColorArr[1],
      B = currentColorArr[2];
  console.log(R,G,B);
  if(B > 0) B = B-10;
  var indic = 255-B;
  G = indic/2;
  R = indic;

  this.style.backgroundColor = "rgb("+R+","+G+","+B+")";
}

我尝试了很多东西，但基本上，我希望我的颜色来自rgba(0,0,255)，然后是rgba(0,255,130)，然后是rgba(255,130,0)，最后是rgba(255,0,0)（所以，来自蓝色到绿色，然后是绿色到红色）。

我知道我可以做多个if / else语句来检查每个案例，但是如果有更有效的方法使用数学，我只是在徘徊？

我不是想做任何动画/过渡。

Answer 1

为了使用数学公式，有一些进度的数字指示器是有帮助的，例如从0到255，然后从中计算颜色。

这并不是你“基本上”要求的，但它说明了我的意思：假设红色成分在此过程中会从0线性增加到255。然后，您可以查看现有字段的红色值，并立即知道您的位置。如果你想要通过绿色，这应该接近你想要做的：

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.shape.Line;
import javafx.stage.Stage;


public class ArrowTest extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        double startx = 200;
        double starty = 100;
        double endx = 100;
        double endy = 300;

        double arrowAngle = Math.toRadians(45.0);
        double arrowLength = 10.0;

        double lineAngle = Math.atan2(starty - endy, startx - endx);

        double x1 = Math.cos(lineAngle + arrowAngle) * arrowLength + endx;
        double y1 = Math.sin(lineAngle + arrowAngle) * arrowLength + endy;

        double x2 = Math.cos(lineAngle - arrowAngle) * arrowLength + endx;
        double y2 = Math.sin(lineAngle - arrowAngle) * arrowLength + endy;

        Group root = new Group();

        Line line = new Line(startx, starty, endx, endy);
        Line arrowHead1 = new Line(endx, endy, x1, y1);
        Line arrowHead2 = new Line(endx, endy, x2, y2);

        root.getChildren().addAll(line, arrowHead1, arrowHead2);

        primaryStage.setScene(new Scene(root, 800, 600));
        primaryStage.show();
    }
}

这样您就不会像问题中那样传递颜色// assume r,g,b are the current values var progress = r; progress += 1; // of course you can increment faster r = progress; g = 255 - (255 * (Math.abs(progress-127)/128)) b = 255 - progress;。但是，我认为它仍然可以解决您的问题。 rgba(255,130,0)线性增加，r线性减少，b首先增加，然后在过程的50％后减少。

JS：从RGB Blue到RGB Red

1 个答案: