为选定对象合并不透明度滑块 [英] Incorporating Opacity Slider for Selected Object

问题描述

我正在尝试合并一个不透明度滑块，以便根据滑块的位置(完全可见100个)将所有选定对象设置为更改.我正在使用fabric.js/master/dist/fabric.js和jQuery 3.3.1.我在这里做错了什么? 我基本上是在尝试在fabricjs.com上整合不透明度滑块.

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/master/dist/fabric.js and jQuery 3.3.1. What am I doing wrong here? I am basically trying to incorporate the Opacity slider on fabricjs.com.

我遇到此错误: 未捕获的TypeError:无法读取未定义的属性'opacity'"

I'm getting this error: "Uncaught TypeError: Cannot read property 'opacity' of undefined"

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

我尝试合并的答案:不透明度"滑块织物对象

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>

提前谢谢！

推荐答案

您需要使用诸如selection:created, selection:updated之类的事件来获取activeobject，并将jquery ui用于jquery滑块.

You need to get activeobject using events like selection:created, selection:updated and use jquery ui for jquery slider.

演示

DEMO

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>

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