HTML5 画布滑块

尝试创建一个滑块类，让您轻松快速地自定义值。您可以拖动手柄或单击滑块的任何部分以将手柄移动到那里，它可以工作......有点。您可以根据需要单击任意次数，但是...如果你甚至点击一次或拖动，然后松开并重试，它只会下降（永远不会上升）一点点。这听起来可能令人困惑，所以这里是小提琴。

var Slider = createEntity({
  init: function (args) {
    args = args || {};
    this.x = args.x || 0;
    this.y = args.y || 0;
    this.width = args.width || 10;
    this.height = args.height || 100;
    this.min = args.min || 0;
    this.max = args.max || 100;
    this.value = args.value || 50;
    this.rotation = args.rotation || 0;
    this.on = args.on || function () {};
    var backFill = randHsla();
    args.back = args.back || {};
    this.back = args.back;
    args.back.fill = args.back.fill || backFill;
    this.back.fill = args.back.fill;
    args.back.borderFill = args.back.borderFill || backFill;
    this.back.borderFill = args.back.borderFill;
    args.back.width = args.back.width || 5;
    this.back.width = args.back.width;
    args.back.x = args.back.x || this.width / 2 - this.back.width / 2;
    this.back.x = args.back.x;
    var handleColor = randHsla();
    args.handle = args.handle || {};
    this.handle = args.handle;
    args.handle.fill = args.handle.fill || handleColor;
    this.handle.fill = args.handle.fill;
    args.handle.borderStroke = args.handle.borderStroke || handleColor;
    this.handle.borderStroke = args.handle.borderStroke;
    args.handle.height = args.handle.height || 5;
    this.handle.height = args.handle.height;
    args.handle.y = args.handle.y || 0;
    this.handle.y = args.handle.y;
    this.updatePos();
  },
  draw: function (fx) {
    fx.save();
    fx.translate(this.x, this.y);
    fx.rotate(this.rotation);
    fx.fillStyle = this.back.fill;
    fx.beginPath();
    fx.fillRect(this.back.x, 0, this.back.width, this.height);
    fx.closePath();
    fx.fillStyle = this.handle.fill;
    fx.strokeStyle = this.handle.borderStroke;
    fx.beginPath();
    fx.rect(0, this.handle.y, this.width, this.handle.height);
    fx.closePath();
    fx.fill();
    fx.stroke();
    fx.restore();
  },
  updateVal: function () {
    var oldVal = this.value,
      handleRange = this.height - this.handle.height,
      valRange = this.max - this.min;
    this.value = (handleRange - this.handle.y) / handleRange * valRange + this.min;
    if (this.on instanceof Function && this.value !== oldVal) {
      this.on();
    }
    return this;
  },
  updatePos: function () {
    var handleRange = this.height - this.handle.height,
      valRange = this.max - this.min;
    this.handle.y = handleRange - ((this.value - this.min) / valRange) * handleRange;
    return this;
  },
  getMouse: function (map) {
    var self = this,
      mouse = getMouse(map),
      bounds = {};
    setBounds();
    map.addEventListener('mousedown', function (event) {
      if (hasPoint(bounds, mouse.x, mouse.y)) {
        map.addEventListener('mousemove', onMouseMove);
        map.addEventListener('mouseup', onMouseUp);
      } else if (hasPoint(self, mouse.x, mouse.y)) {
        var y = mouse.y - self.y;
        self.handle.y = Math.min(self.height - self.handle.height, Math.max(y, 0));
        self.updateVal();
      }
    });
    function onMouseUp(event) {
      map.removeEventListener('mousemove', onMouseMove, false);
      map.removeEventListener('mouseup', onMouseUp, false);
    }
    function onMouseMove(event) {
      var y = mouse.y - self.y;
      self.handle.y = Math.min(self.height - self.handle.height, Math.max(y, 0));
      self.updateVal();
    }
    function setBounds() {
      bounds.x = self.x;
      bounds.y = self.y + self.handle.y;
      bounds.width = self.width;
      bounds.height = self.handle.height;
    }
    return this;
  }
});

可以在此处找到createEntity和hasPoint等外部函数。

单击滑块并在第一个滑块后松开后，我将如何使其工作？