不透明度滑块织物对象(Opacity slider for a fabric object)

2019-10-22 03:35发布

我有一个画布,它包括面料objects.I想为文本区域在canvas.How底色“textbackroundColor”我可以做幻灯片和改变功能做不透明度滑块?

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

  });

Answer 1:

先把画布的活动对象

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();
       }
});


Answer 2:

另一种方式,通过一定范围的输入加上$(文件)。在

$(document).on("change", "#alpha", function () {
transval = $(this).val();
var obj = canvas.getActiveObject();
obj.set({
opacity: transval
});
canvas.renderAll();
});


文章来源: Opacity slider for a fabric object