Incorporating Opacity Slider for Selected Object

问题:

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.

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

What I have: https://codepen.io/s-harper/pen/QxeMXL

Answers I've tried incorporating: 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>

Thanks in advance!

回答1:

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>

文章来源: Incorporating Opacity Slider for Selected Object