Создание пользовательского диапазона ввода в холсте с помощью KonvaJs

Question

Мне нужен диапазон входного типа в холсте для некоторых целей, мне нужно использовать это, чтобы изменить свой шрифт. Я уже делаю форму, а также вытягиваю, но контроллер круга выходит за линию.

Просто просмотрите мусор, чтобы увидеть, что я имею в виду. Jsbin

Я хочу ограничить область драпировки на линию, только как работает диапазон ввода.

Это documentation библиотеки KonvaJs.

Answer 1

это работает, кодируется Lavrton

Source

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>