Обновленная версия кнопки удаления в качестве замены элемента для управления в Fabricjs? - PullRequest
Новая
       20

Обновленная версия кнопки удаления в качестве замены элемента для управления в Fabricjs?

1 голос
/ 12 июня 2019

Мне нужно создать кнопку удаления для объектов, которые я добавляю на холст, заменив верхний правый угол или свойство 'tr' элементов управления.Я не нашел решения для этого, так как предыдущие версии приводят к прекращению работы всей платформы.

Я нашел решение моей проблемы для предыдущих версий FabricJS, которые сейчас устарели в Fabric 3.0.0.Приведенная ссылка является точной проблемой, которую я имею, мне просто нужно обновить текущую версию фреймворка.Требуемое решение для обновления: Добавить кнопку Удалить для элемента в Canvas Fabric JS

1 Ответ

1 голос
/ 14 июня 2019

Я пробовал такое же решение с версией 3.0.0.Это все еще работает без особых изменений.См. здесь

HTML 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>

<div id="canvas-container" class="over">
    <div class="canvas-container" style="width: 800px; height: 600px; position: relative; -webkit-user-select: none;">
        <canvas id="canvas" width="800" height="600"></canvas>
    </div>
</div>

JavaScript 

    var canvas = new fabric.Canvas('canvas');
var HideControls = {
            'tl':true,
            'tr':false,
            'bl':true,
            'br':true,
            'ml':true,
            'mt':true,
            'mr':true,
            'mb':true,
            'mtr':true
        };
fabric.Image.fromURL('http://img.etimg.com/thumb/height-480,width-640,msid-65658383,imgsize-103718/google-chrome.jpg', function (img) {
    img.top = 60;
    img.left = 30;
    img.setControlsVisibility(HideControls);
    canvas.add(img);
});

canvas.renderAll();

function addDeleteBtn(x, y){
    $(".deleteBtn").remove(); 
    var btnLeft = x-10;
    var btnTop = y-10;
    var deleteBtn = '<img src="http://www.imcjms.com/assets/images/close-window.png" class="deleteBtn" style="position:absolute;top:'+btnTop+'px;left:'+btnLeft+'px;cursor:pointer;width:20px;height:20px;"/>';
    $(".canvas-container").append(deleteBtn);
}

canvas.on('object:selected',function(e){
        addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
});

canvas.on('mouse:down',function(e){
    if(!canvas.getActiveObject())
    {
        $(".deleteBtn").remove(); 
    }
});

canvas.on('object:modified',function(e){
    addDeleteBtn(e.target.oCoords.tr.x, e.target.oCoords.tr.y);
});

canvas.on('object:scaling',function(e){
    $(".deleteBtn").remove(); 
});
canvas.on('object:moving',function(e){
    $(".deleteBtn").remove(); 
});
canvas.on('object:rotating',function(e){
    $(".deleteBtn").remove(); 
});
$(document).on('click',".deleteBtn",function(){
    if(canvas.getActiveObject())
    {
        canvas.remove(canvas.getActiveObject());
        $(".deleteBtn").remove();
    }
});
...