将值设置为 jquery 小部件滑块

Question

编辑：首先对问题进行更简单的解释。下面有更详细的解释。

我使用一些 jquery 小部件代码来创建一个 UI 滑块。代码在这里：

https://webgl2fundamentals.org/webgl/resources/jquery-gman-circle.js

这个可以用，直接在JS脚本中调用组件是这样的：

$("#rotation").gmanUnitCircle({
    width: 200,
    height: 200,
    value: 0,
    slide: function(e, u) {
      rotation[0] = u.x;
      rotation[1] = u.y;
      drawScene();
    },
  });

我想做的是用代码给滑块设置一个值。这似乎可以用你想要的角度调用代码的 drawCircle(ctx) 函数，但我不知道如何调用它，因为它是一个大的 JQuery 函数的一部分，该函数调用自身并设置所有滑块回调元素构造。（您可以在上面的 link 代码中查看）。

问题是如何以简单的方式执行此操作，或者如何从外部（从我的特定圆实例）调用或访问 drawCircle(ctx) 函数？

（来自 c#，我会这样做，通过接口公开我想从外部访问的方法）

用于创建滑块和了解其工作原理的代码，以及可以在 web 本身中进行代码编辑的可能性，可在此处找到：

https://webgl2fundamentals.org/webgl/lessons/webgl-2d-rotation.html

编辑：这似乎是可能的，但仍然无法实现。

https://learn.jquery.com/jquery-ui/widget-factory/widget-method-invocation/

Accessing widget instance from outside widget

所以我在设置我想要的旋转和类似的组合代码尝试后尝试 $('#rotation').gmanUnitCircle('drawCircle') 但它不起作用。

更详细的解释： （如果问题已经被理解，你不需要阅读这篇文章。我只是更广泛地解释了这个问题，一个类似的问题是如何解决的，我尝试了更多的尝试来解决它）

这个问题是这个问题的延续：

我在更新圆形滑块时遇到了同样的问题。

我的问题是我用鼠标点击和拖动来设置圆的值，但是我不能直接设置值。我想将圆的旋转设置为一个确定的值。

我正在使用的完整代码在这里：

https://webgl2fundamentals.org/webgl/lessons/webgl-2d-rotation.html

我尝试创建一个更新值的函数，在以下位置调用 updateValue 函数：

https://webgl2fundamentals.org/webgl/resources/jquery-gman-circle.js

function updateSlider(slider, value) {slider.updateValue(value)}

但它不是滑块情况下 UI 元素功能中的函数。

然后我尝试调用代码中使用的 drawCircle(ctx) 函数：

function drawCircle(ctx)

但是在_create: function() {里面，不知道圈子里怎么称呼

我还考虑过使用 setSlider 值函数扩展创建的用于设置值的 cicle 的功能，但我不知道如何使用此函数来更新我的单击按钮事件以更新值。

rotCircle = $('#rotation').gmanUnitCircle({
      width: 200,
      height: 200,
      value: 0,
      slide: (e, u) => {
        this.rotation[0] = u.x;
        this.rotation[1] = u.y;
        this.drawScene(shader);
      },
      setSliderValue: (e, u) => { // <- I would want to call this function to set the values I desire in u
        this.rotation[0] = u.x;
        this.rotation[1] = u.y;
        this.drawScene(shader);
      },
    });

我尝试触发我创建的函数的事件，试图分派或触发调用该函数的事件，但没有成功：

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

此外，尝试通过强制事件调用来调用函数似乎不是一个好方法。我还尝试通过按钮单击事件调用它，因为实际上应该使用按钮设置滑块的值。

综上所述，我就是想直接设置圆形旋转滑块的值。我不熟悉 Javascript 事件方法，所以我想我觉得这比预期的要难。

提前致谢

Answer 1

我仔细查看了您的代码并将其减少到绝对最低限度。事实证明，您只需将角度的起始值放入启动方法的空选项参数中即可提供角度的起始值：$("#example").gmanUnitCircle({value: -Math.PI/3});。在我的示例中，我选择了 -60° 的弧度值。

$(function(){
  var widget=$("#example").gmanUnitCircle({value: -Math.PI/3});
  function setval(w,val){w.empty().data("gmanUnitCircle",null).gmanUnitCircle({value:val});}

  $('input').on('input',function(ev){ setval(widget,ev.target.value*Math.PI/180); })
});

#ui { width: 200px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>
<script src="https://webgl2fundamentals.org/webgl/resources/jquery.mousecapture.js"></script>
<script src="https://webgl2fundamentals.org/webgl/resources/jquery-gman-circle.js"></script>
<body>
<div class="description">
Drag Circle
<p><input type="text" placeholder="enter an angle (deg)"></p>
</div>
<div id="example"></div>

我现在添加了一个解决方法：每当您在输入字段中输入数字时，小部件 将只是重新创建！它可能不是您要找的东西，但它做得很好。

将值设置为 jquery 小部件滑块

Set value to jquery widget slider

javascript

jquery

jquery-widgets