滑块和画布的定位

问题描述 投票：0回答：1

我在正确定位滑块时遇到困难。 我似乎也无法使垂直滑块工作（滑动头不会移动）。

我的代码：

var hSlider = document.getElementById("myRange");

var output = document.getElementById("demo");

output.innerHTML = hSlider.value;

//Vertikal slider

const vSlider = document.getElementById("vertSlider");

vSlider.addEventListener("input", function() {

  console.log("Slider value:", this.value);

});

//Bunch of variables

var canv =

  document.getElementById("canvas");

var ctx = canv.getContext("2d");

var x = 0;

var y = 0;

var w = canv.width;

var h = canv.height;

var r = 100;

var g = 0;

var b = 50;

const rz = 50;

hSlider.min = 0

hSlider.max = w - rz;

//At the start: load the rectangle

ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

ctx.fillRect(0, 0, 50, 50);

//Move rectangle function

function draw() {

  ctx.clearRect(0, 0, w, h);

  ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

  ctx.fillRect(x, y, rz, rz);

  x = hSlider.value;

}

//Start moving

hSlider.oninput = function() {

  output.innerHTML = this.value;

  setInterval(draw, 30);

}
.myCanvSlide {
  display: flex;
}

.vertical-slider {
  height: 350px;
  align-items: center;
  float: left;
}

.horizontal-slider {
  width: 350px;
  float: left;
}

.canvas {
  border: 1px solid #000000;
  width: 350px;
  height: 350px;
  float: left;
}

.vSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 100%;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.vSlider:hover {
  opacity: 1;
}

.vSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.vSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.hSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
}

.hSlider:hover {
  opacity: 1;
}

.hSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.hSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
<body>

  <div class="myCanvSlide">

    <!--Vertikal slider, to the right of the canvas-->

    <div class="vertical-slider">

      <input type="range" min="1" max="100" value="1" class="vSlider" id="vertSlider">

    </div>

    <!--Canvas for animations and such-->

    <canvas id="canvas" class="canvas" width="300" height="300" style="border:1px solid #000000;">

  </canvas>

    <!--Horizontal slider, under canvas-->

    <div class="horizontal-slider">

      <input type="range" min="1" max="100" value="1" class="hSlider" id="myRange">

    </div>

  </div>

  <script src="script.js"></script>

</body>

我尝试过不使用 myCanvSlide div，并且尝试在 CSS 代码中切换 float/clear 标签。 我的另一个问题是垂直滑块不起作用。我应该能够上下移动滑动头，但它只是卡在中间。

javascript css canvas slider
1个回答
0
投票

您的垂直滑块现在只是一个水平滑块，高 350 像素，宽 25 像素。它尝试从左向右滑动，但没有空间。

有创建垂直滑块的不同方法。我选择了一种最简单的风格。在下面的示例中，我：

  • 将垂直滑块更改为 25 像素高和 350 像素宽，
  • 将其旋转 90 度，使其看起来垂直

为了正确定位滑块，我使用了 CSS 网格。

var hSlider = document.getElementById("myRange");
var vSlider = document.getElementById("vertSlider");

var canv = document.getElementById("canvas");

var ctx = canv.getContext("2d");

var x = 0;

var y = 0;

var w = canv.width;

var h = canv.height;

var r = 100;

var g = 0;

var b = 50;

const rz = 50;

hSlider.min = 0

hSlider.max = w - rz;

vSlider.min = 0;
vSlider.max = h - rz;

//At the start: load the rectangle

ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

ctx.fillRect(0, 0, 50, 50);

//Move rectangle function

function draw() {

  ctx.clearRect(0, 0, w, h);

  ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";

  ctx.fillRect(x, y, rz, rz);

  x = hSlider.value;
  y = vSlider.value;

}

//Start moving


setInterval(draw, 30);
.myCanvSlide {
  display: grid;
  gap: 10px;
  grid-template-columns: 25px 350px;
  grid-template-rows: 25px 350px;
  grid-template-areas:
    ".       hSlider"
    "vSlider canvas"  
 
}

.vertical-slider {
  grid-area: vSlider;
}

.horizontal-slider {
  grid-area: hSlider;
}

.canvas {
  grid-area: canvas;
  border: 1px solid #000000;
}

.vSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 350px;
  height: 25px;
  transform: translateX(25px) rotateZ(90deg);
  transform-origin: top left;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin: 0;
}

.vSlider:hover {
  opacity: 1;
}

.vSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.vSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.hSlider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 25px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: .2s;
  transition: opacity .2s;
  margin: 0;
}

.hSlider:hover {
  opacity: 1;
}

.hSlider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}

.hSlider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  background: #04AA6D;
  cursor: pointer;
}
<div class="myCanvSlide">

  <div class="vertical-slider">

    <input type="range" min="1" max="100" value="1" class="vSlider" orient="vertical" id="vertSlider">

  </div>


  <canvas id="canvas" class="canvas" width="350" height="350"></canvas>


  <div class="horizontal-slider">

    <input type="range" min="1" max="100" value="1" class="hSlider" id="myRange">

  </div>

</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.