javascript - 如何使用其他滚动条控制 Canvas 的滚动

Question

我正在开发一个元素，为此我创建了一个示例，在该示例中，我想通过我制作的其他自定义滚动条来控制 Canvas 的滚动 Action 。

在这段代码中，我做了一个分区，其中有两个 div，其中一个包含两个 canvas，另一个包含 scrollber

我希望我的 canvas-myCanvas1 由我制作的滚动条控制

var ctx;
var canvas;

function wrapText(context, text, x, y, maxWidth, lineHeight) {
  var words = text.split(' ');
  var line = '';

  for (var n = 0; n < words.length; n++) {
    var testLine = line + words[n] + ' ';
    var metrics = context.measureText(testLine);
    var testWidth = metrics.width;
    if (testWidth > maxWidth && n > 0) {
      context.fillText(line, x, y);
      line = words[n] + ' ';
      y += lineHeight;
    } else {
      line = testLine;
    }
  }

  context.fillText(line, x, y);
}
window.onload = function() {
  canvas1 = document.getElementById("myCanvas1");
  ctx1 = canvas1.getContext('2d');
  canvas2 = document.getElementById("myCanvas2");
  ctx2 = canvas2.getContext('2d');
  ctx1.font = "18px Arial";
  ctx2.font = "18px Arial";
  var maxWidth = 400;
  var lineHeight = 25;
  var x = (canvas1.width - maxWidth) / 2;
  var y = 60;
  var text = "Stephen William Hawking CH CBE FRS FRSA (8 January 1942 – 14 March 2018) was an English theoretical physicist, cosmologist, and author who was director of research at the Centre for Theoretical Cosmology at the University of Cambridge at the time of his death.[17][18][7] He was the Lucasian Professor of Mathematics at the University of Cambridge between 1979 and 2009.His scientific works included a collaboration with Roger Penrose on gravitational singularity theorems in the framework of general relativity and the theoretical prediction that black holes emit radiation, often called Hawking radiation. Hawking was the first to set out a theory of cosmology explained by a union of the general theory of relativity and quantum mechanics. He was a vigorous supporter of the many-worlds interpretation of quantum mechanics.Hawking achieved commercial success with several works of popular science in which he discusses his own theories and cosmology in general. His book A Brief History of Time appeared on the British Sunday Times best-seller list for a record-breaking 237 weeks. Hawking was a Fellow of the Royal Society (FRS), a lifetime member of the Pontifical Academy of Sciences, and a recipient of the Presidential Medal of Freedom, the highest civilian award in the United States. In 2002, Hawking was ranked number 25 in the BBC's poll of the 100 Greatest Britons.In 1963, Hawking was diagnosed with an early-onset slow-progressing form of motor neurone disease (MND; also known as amyotrophic lateral sclerosis ALS or Lou Gehrig's disease) that gradually paralysed him over the decades.[21][22] Even after the loss of his speech, he was still able to communicate through a speech-generating device, initially through use of a hand-held switch, and eventually by using a single cheek muscle. He died on 14 March 2018 at the age of 76, after living with the disease for more than 50 years.";
  wrapText(ctx1, text, x, y, maxWidth, lineHeight);
  ctx2.fillText("CANVAS", 250, 250);

}

.scrollbar {
  margin-left: 30px;
  float: right;
  height: 600px;
  width: 50px;
  background: #fbfbfb69;
  overflow-y: scroll;
  margin-bottom: 0px;
}

.force-overflow {
  min-height: 800px;
}

#wrapper {
  text-align: center;
  width: 300px;
  margin: auto;
}

#style-1::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar {
  width: 7px;
  background-color: #F5F5F5;
}

#style-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #555;
}

.left {
  display: inline-block;
}

.right {
  display: inline-block;
}

<br><br>
<center>
  <div height="700" width="500" style="background-color: #fbfbfb69">
    <div class="left" style="max-height: 600px;max-width: width window;overflow: hidden;" onscroll="oninput">
      <canvas id="myCanvas1" height="1100px" width="600px" style="background-color: #fbfbfb69; "></canvas>
      <canvas id="myCanvas2" height="600" width="600" style="background-color: #fbfbfb69"></canvas>
    </div>
    <div class="scrollbar right" id="style-1">
      <div id='myId' class="force-overflow"></div>
    </div>
  </div>
</center>

enter image description here

Answer 1

您可以简单地使用 css range slider element 而不是制作 div 元素。在 Canvas2 上。

据我所知，链接中的 css 适用于 firefox、chrome 和 IE，只需针对不同的外观稍作修改。

注意你必须为所有类型的浏览器编写css，否则外观会不一致。

HTML 应该是这样的:

<input type="range" min="minVal" max="maxVal" ...>