Снимите флажки при выборе нового объекта изображения на холсте (Fabricjs) - PullRequest
Новая
       13

Снимите флажки при выборе нового объекта изображения на холсте (Fabricjs)

0 голосов
/ 10 июня 2019

Я добавляю изображение с помощью кнопки и применяю фильтры с помощью флажка, и он работает, но когда я пробую второе изображение, флажок уже установлен, и на втором изображении еще нет фильтра.

HTML 

<!DOCTYPE html>
   <html>
<head>
    <title></title>
    <link rel="stylesheet" href="http://fabricjs.com/css/bootstrap.css">
    <link rel="stylesheet" href="http://fabricjs.com/css/kitchensink.css">
    <link href="http://fonts.googleapis.com/css?family=Plaster" 
     rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Engagement" 
     rel="stylesheet" type="text/css">


    <link href="style.css" rel="stylesheet" type="text/css"  />
</head>
<body>
    <div class="tab-pane active" id="buttons">
        <button type="button" class="btn line" id="addImage">Add Image</button>            
    </div>
    <div class="">
        <canvas id="fabricjs-canvas" class=""></canvas>
    </div>
    <img src="https://cdn.shopify.com/s/files/1/1061/1924/files/Eye_Roll_Emoji_large.png?v=1541768914" id="my-image">

        <div id="filters" class="filters" style="display:none;">
            <input type="checkbox" class="checkbox1" name="checkme" data-filter="0">Grayscale
            <input type="checkbox" class="checkbox1" name="checkme"  data-filter="1">Sepia
            <input type="checkbox" class="checkbox1" name="checkme" data-filter="2">Invert
            <input type="checkbox" class="checkbox1" name="checkme" data-filter="3">Emboss
            <input type="checkbox" class="checkbox1" name="checkme" data-filter="4">Sharpen
        </div>


</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.js"></script>

<script src="script.js"></script>

</html>

Javascript 

fabric.Object.prototype.objectCaching = false;
fabric.textureSize = 5168;
var canvas = new fabric.Canvas('fabricjs-canvas');
$("#addImage").click(function() {
    $("#container").hide();


    canvas.on({
        'object:selected': function (e) {
            showFilters();
        },
        'selection:cleared': function (e) {
            hideFilters();
        }
    });




    var image1 = 'https://cdn.shopify.com/s/files/1/1061/1924/files/Eye_Roll_Emoji_large.png?v=1541768914';

    fabric.Image.fromURL(image1, function(image) {
        canvas.add(image);
    });

    function showFilters() {
        $("#filters").show();
        $('input:checkbox').removeAttr('checked');
    }

    function hideFilters() {
        $("#filters").hide();
    }

    var filters = [
        new fabric.Image.filters.Grayscale(),       // grayscale    0
        new fabric.Image.filters.Sepia(),          // sepia        1
        new fabric.Image.filters.Invert(),          // invert       2

        new fabric.Image.filters.Convolute({        // emboss       3
          matrix: [ 1, 1, 1,
          1, 0.7, -1,
          -1, -1, -1 ]
      }),

        new fabric.Image.filters.Convolute({        // sharpen      4
            matrix: [  0, -1, 0,
            -1, 5, -1,
            0, -1, 0 ]
        })
        ];



        $(function() {
            $('#filters').on("change", "input", function () {
                for (var i = 0; i < filters.length; i++) {
                    if (i == true) {
                        var isChecked = $(this).prop("checked"),            
                        filter = $(this).data("filter"),
                        obj = canvas.getActiveObject();

                        obj.filters[filter] = isChecked ? filters[filter] : null;
                        obj.applyFilters();
                    }
                    else{

                    }
                }            



                canvas.renderAll();
            });
        });
    });

CSS 

#fabricjs-canvas{

    width:1000px;
     height:700px; 
    border:1px solid black;
    float:left
}
#my-image{
    visibility: hidden;
}
#buttons{
    float: right;
    left: 1000px;
}

ЗдесьЕсть Демо Но в данный момент в демке флажок не отображается.но флажок работает, когда я тестирую локальные средства, когда я выбираю активный объект.

...