代码之家 › 专栏 › 技术社区 › anonymoose

为所选对象合并不透明度滑块

fabricjs javascript

anonymoose · 技术社区 · 6 年前

我正在尝试合并不透明度滑块,以便根据滑块的位置(100完全可见)将任何选定对象设置为更改。我在用 fabric.js/master/dist/fabric.js 以及jquery 3.3.1。我在这里做错什么了? I am basically trying to incorporate the Opacity slider on fabricjs.com .

我得到这个错误: “未捕获的类型错误:无法读取未定义的属性”“opacity”“。”

我拥有的: 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>

事先谢谢!

1 回复 | 直到 6 年前

Durga 6 年前

您需要使用以下事件获取ActiveObject selection:created, selection:updated 并使用jquery ui作为jquery滑块。

演示

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>