javascript - 织物对象的不透明度 slider

Question

我有一个 Canvas ，其中包含织物对象。我想在 Canvas 中为文本区域的背景“textbackroundColor”做不透明度 slider 。如何进行滑动和更改功能？

$("#backgroundOpacity").slider( {
     min: 10,
     max: 50,
     value: 30,
     slide: text_bgColor_slider_moved,
     change: text_bgColor_slider_changed

  });

Answer 1

首先获取 Canvas 的事件对象

var activeObject = canvas.getActiveObject();

然后

$("#backgroundOpacity").slider( {
       max : 100,
       value : activeObject.opacity * 100,
       slide: function (event, ui) {
           activeObject.setOpacity(ui.value / 100);
           canvas.renderAll();
       },
       stop : function (event, ui) {
           canvas.renderAll();
       }
});