javascript - 从 slider Fabricjs 更改事件对象的不透明度

标签 javascript jquery fabricjs

我正在尝试从 slider 更改事件 Canvas 对象的不透明度,但我不明白为什么此代码不起作用。我正在使用 Fabric.js。

slider 的 html:

<input class="opacity-slider" type="range" max="100" min="0" step="1" value="100">

js:

var obj = canvas.getActiveObject();
$(document).on("change", ".opacity-slider", function (){
    var opacity = $(".opacity-slider").val();
    $(".slider-value").text(opacity);
    canvas.getActiveObject().setOpacity(opacity)
    canvas.renderAll();
});

最佳答案

找到了解决方案。 我没有将不透明度除以 100,所以

var obj = canvas.getActiveObject();
$(document).on("change", ".opacity-slider", function (){
    var opacity = jQuery(".opacity-slider").val();
    opacity = opacity / 100;
    jQuery(".slider-value").text(opacity);
    canvas.getActiveObject().setOpacity(opacity)
    canvas.renderAll();
});

关于javascript - 从 slider Fabricjs 更改事件对象的不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39729897/

相关文章:

javascript - jQuery Sweet Alert 意外的第二个参数错误

javascript - Firefox Addon SDK - pageMod 更新 contentScriptOptions?

javascript - 如何使 Canvas 中的对象不可选择?

javascript - 如何在文件上传时显示加载图形?

javascript - 根据单击的单选按钮更改 'li' css 样式

jquery - 使用 jQuery 将元素插入 div,追加不起作用

javascript - 在复选框单击/选中时隐藏元素,在复选框取消选中时重新插入元素

jquery 如何删除第一个 x div 的?

javascript - 如何禁用鼠标中键拖动选择?

javascript - Fabric js 在不拉伸(stretch)的情况下将图像调整为给定尺寸