使用 KonvaJs 在画布中创建自定义输入范围

Making custom input range in canvas using KonvaJs

本文关键字：自定义 输入 范围 创建 布中 KonvaJs 使用      更新时间：2023-09-26

出于某些目的，我需要在画布中输入输入类型范围，我需要使用它来更改我的字体大小。我已经制作了形状并且还可以拖动，但是圆形控制器超出了线。

只需预览垃圾箱即可了解我的意思。杰斯宾

我想将拖动区域限制为仅像输入范围一样的行。

这是KonvaJs库的文档。

这是有效的，由Lavrton编码

源

var width = window.innerWidth;
    var height = window.innerHeight;
    var stage = new Konva.Stage({
      container: 'container',
      width: width,
      height: height
    });
    var layer = new Konva.Layer();
 var Track = new Konva.Line({
            x: 44,
            y: 55,
            points: [60, 0, 0, 0, 0, 0, 0, 0],
            stroke: '#BDC3C7',
            strokeWidth: 6,
            visible: true,
            name: 'TrackLine',
            lineCap: 'sqare',
            lineJoin: 'sqare'
          });
    var TrackBall = new Konva.Circle({
            x: 44,
            y: 55,
            stroke: '#D35400',
            fill: '#ddd',
            strokeWidth: 2,
            name: 'TrackControl',
            radius: 8,
            draggable: true,
            dragOnTop: false,
            visible: true,
            dragBoundFunc: function(pos) {
              console.log(pos.x, Math.min(44, pos.x))
            return {
                x: Math.min(104, Math.max(44, pos.x)),
                y: this.getAbsolutePosition().y
                };
            }
     });
layer.add(Track);
layer.add(TrackBall);
stage.add(layer);
<script src="https://cdn.rawgit.com/konvajs/konva/0.10.0/konva.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <div id="container" class="CanCont"></div>

相关文章：