对象的不透明度滑块 [英] Opacity Slider for Objects

问题描述

我正在尝试合并一个不透明度滑块，以便根据滑块的位置(完全可见100个)将所有选定对象设置为更改.我正在使用Fabric.js版本1.7.22和jQuery 3.3.1.

I'm trying to incorporate an opacity slider so that any selected objects are set to change based on the slider's position (100 being completely visible). I'm using Fabric.js version 1.7.22 and jQuery 3.3.1.

最初，我问这个问题并得到了一个可行的解决方案(谢谢@Durga)，但意识到我使用的是错误的Fabric.js版本.我查看了文档，但被卡住了.我在这里做什么错了?

I originally asked this and got a working solution (thank you @Durga) but realized I was using the wrong Fabric.js version. I've looked over the docs but am stuck. What am I doing wrong here?

我所拥有的: http://jsfiddle.net/code4ever/srm25f9d/

var canvas = new fabric.Canvas("c");
canvas.isDrawingMode = true;

// select, draw
$("#select").click(function() {
  canvas.isDrawingMode = false;
});
$("#draw").click(function() {
  canvas.isDrawingMode = true;
});
var activeObject = null;
canvas.on('selection:created', function(options) {
  activeObject = options.target;
  $("#alpha").slider("option", "value", activeObject.opacity);
});
canvas.on('selection:updated', function(options) {
  activeObject = options.target;
  $("#alpha").slider("option", "value", activeObject.opacity);
});
canvas.on('selection:cleared', function(options) {
  activeObject = null;
});
$("#alpha").slider({
  max: 1,
  min: 0,
  step: 0.1,
  value: 1,
  slide: function(event, ui) {
    activeObject && (activeObject.opacity = ui.value)
    canvas.requestRenderAll();
  },
  stop: function(event, ui) {
    canvas.requestRenderAll();
  }
});

canvas {
  border: solid 1px #000;
}

fieldset {
  max-width: 350px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<br>
<button id="draw">Draw</button>
<button id="select">Select</button>
<br>
<br>
<fieldset>
  <legend>Controls</legend>
  <label for="alpha">Opactity</label>
  <div id="alpha" name="alpha"></div>
</fieldset>

提前谢谢！

推荐答案

假设您当时需要更新一个对象，则可以使用FabriJs函数getActiveObject()来更新不透明度:

Assuming you need to update one object at the time then you can you FabriJs function getActiveObject() to update opacity:

var canvas = new fabric.Canvas("c");
canvas.isDrawingMode = true;

// select, draw
$("#select").click(function() {
  canvas.isDrawingMode = false;
});
$("#draw").click(function() {
  canvas.isDrawingMode = true;
});

$("#alpha").slider({
  max: 1,
  min: 0,
  step: 0.1,
  value: 1,
  slide: function(event, ui) {
    if (canvas.getActiveObject()){
        canvas.getActiveObject().setOpacity(ui.value);
        canvas.renderAll();
    }
  },
  stop: function(event, ui) {
    canvas.renderAll();
  }
});

如果您需要玩多个对象，则需要分别循环并更改每个对象的不透明度.

If you will need to play with multiple objects then you'll need to loop and change opacity for each object separately.

这篇关于对象的不透明度滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！