javascript - 为选定的对象合并不透明度 slider

Question

我正在尝试合并一个不透明度 slider ，以便将任何选定的对象设置为根据 slider 的位置进行更改(100 表示完全可见)。我正在使用 Fabric.js/master/dist/fabric.js 和 jQuery 3.3.1。我在这里做错了什么？ I am basically trying to incorporate the Opacity slider on fabricjs.com .

我收到此错误:“未捕获类型错误:无法读取未定义的属性‘不透明度’”

我拥有的: https://codepen.io/s-harper/pen/QxeMXL

我尝试合并的答案: Opacity slider for a fabric object

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 = canvas.getActiveObject();

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

canvas {
  border: solid 1px #000;
}

fieldset {
  max-width: 350px;
}

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://rawgithub.com/kangax/fabric.js/master/dist/fabric.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>
  <input type="range" id="alpha" name="alpha" min="0" max="100" value="100" step="1" />
</fieldset>

提前致谢!

Answer 1

您需要使用 selection:created、selection:updated 等事件获取 activeobject，并使用 jquery ui 作为 jquery slider。

演示

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://rawgithub.com/kangax/fabric.js/master/dist/fabric.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>