Question

var canvas2D = {
  canvas : undefined,
  canvasContext : undefined,
  x : undefined,
  y : undefined,
  w : undefined,
  h : undefined,
  color : undefined,
  red : 50,
  green : 50,
  blue : 50
};

canvas2D.start = function()
{
  canvas2D.canvas = document.getElementById("canvas");
  canvas2D.canvasContext = canvas2D.canvas.getContext("2d");
  canvas2D.w = 100;
  canvas2D.h = 50;
  canvas2D.x = canvas2D.canvas.width/2;
  canvas2D.y = canvas2D.canvas.height/2;
  canvas2D.color = "rgb(" + canvas2D.red + ", " + canvas2D.green + ", " + canvas2D.blue+ ")";
  canvas2D.draw();
};

canvas2D.draw = function() 
{
  canvas2D.canvasContext.fillStyle = canvas2D.color;
  canvas2D.canvasContext.fillRect(canvas2D.x - canvas2D.w/2,canvas2D.y - canvas2D.h/2,canvas2D.w,canvas2D.h);
};

canvas2D.setRed = function(n)
{
  canvas2D.red = n.value;
  canvas2D.start();
};

canvas2D.setGreen = function(n)
{
  canvas2D.green = n.value;
  canvas2D.start();
};

canvas2D.setBlue = function(n)
{
  canvas2D.blue = n.value;
  canvas2D.start();
};

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Color Picker</title>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>
<body>
  <canvas width="800" height="600" id="canvas"></canvas><br>
  <script>canvas2D.start();</script>
  Red: <input type="range" id="red" value="50" min="0" max="255" data-show-value="true" oninput="canvas2D.setRed(this);"><br>
  Green: <input type="range" id="green" value="50" min="0" max="255" oninput="canvas2D.setGreen(this);"><br>
  Blue: <input type="range" id="blue" value="50" min="0" max="255" oninput="canvas2D.setBlue(this);">
</body>
</html>

所以我写了一个颜色选择器程序来改变矩形的颜色。任何人都可以告诉我如何使用jQuery Mobile中的滑块来改变矩形的RGB值？我根本不懂jQuery。有人可以给我看一个教程或一个例子吗？谢谢！

Answer 1

您应该创建JQM页面的结构并在页面创建期间初始化滑块：

＆＃13;

$(document).on("pagecreate", "#page-one", function() {
  $("#red").on("change", function() {
    canvas2D.setRed($(this).val());
  });
  $("#green").on("change", function() {
    canvas2D.setGreen($(this).val());
  });
  $("#blue").on("change", function() {
    canvas2D.setBlue($(this).val());
  });
  canvas2D.start();
});


/* Your code below */

canvas2D = {};
canvas2D.start = function() {
  canvas2D.canvas = document.getElementById("canvas");
  canvas2D.canvasContext = canvas2D.canvas.getContext("2d");
  canvas2D.w = 100;
  canvas2D.h = 50;
  canvas2D.x = canvas2D.canvas.width / 2;
  canvas2D.y = canvas2D.canvas.height / 2;
  canvas2D.red = $("#red").val();
  canvas2D.green = $("#green").val();
  canvas2D.blue = $("#blue").val();
  canvas2D.draw();
};

canvas2D.draw = function() {
  canvas2D.color = "rgb(" + canvas2D.red + ", " + canvas2D.green + ", " + canvas2D.blue + ")";
  canvas2D.canvasContext.fillStyle = canvas2D.color;
  canvas2D.canvasContext.fillRect(canvas2D.x - canvas2D.w / 2, canvas2D.y - canvas2D.h / 2, canvas2D.w, canvas2D.h);
};

canvas2D.setRed = function(n) {
  canvas2D.red = n;
  canvas2D.draw();
};

canvas2D.setGreen = function(n) {
  canvas2D.green = n;
  canvas2D.draw();
};

canvas2D.setBlue = function(n) {
  canvas2D.blue = n;
  canvas2D.draw();
};

＆＃13;

.ui-slider input {
  display: none !important;
}

.ui-slider .ui-slider-track {
  margin-left: 20px !important;
}

.ui-slider #red ~ .ui-bar-inherit {
  background: -moz-linear-gradient(left, #ff0000 0%, #ffffff 100%);
  background: -webkit-linear-gradient(left, #ff0000 0%, #ffffff 100%);
  background: linear-gradient(to right, #ff0000 0%, #ffffff 100%);
}

.ui-slider #green ~ .ui-bar-inherit {
  background: -moz-linear-gradient(left, #00ff00 0%, #ffffff 100%);
  background: -webkit-linear-gradient(left, #00ff00 0%, #ffffff 100%);
  background: linear-gradient(to right, #00ff00 0%, #ffffff 100%);
}

.ui-slider #blue ~ .ui-bar-inherit {
  background: -moz-linear-gradient(left, #0000ff 0%, #ffffff 100%);
  background: -webkit-linear-gradient(left, #0000ff 0%, #ffffff 100%);
  background: linear-gradient(to right, #0000ff 0%, #ffffff 100%);
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
  <title>Color Picker</title>
</head>

<body>
  <div data-role="page" id="page-one">
    <div data-role="main" class="ui-content">
      <div class="ui-grid-a">
        <div class="ui-block-a">
          <canvas width="100" height="180" id="canvas"></canvas>
        </div>
        <div class="ui-block-b">
          <input type="range" id="red" value="127" min="0" max="255" data-show-value="true">
          <br>
          <input type="range" id="green" value="127" min="0" max="255" data-show-value="true">
          <br>
          <input type="range" id="blue" value="127" min="0" max="255" data-show-value="true">
        </div>
      </div>
    </div>
  </div>
</body>

</html>

＆＃13;

剩下的只是你对页面样式的好处。祝你好运！

jquery滑块颜色选择器

1 个答案: