javascript - 更新版本的删除按钮作为 Fabricjs 中对象的控件替换？

Question

我需要在添加到画布的对象上创建一个删除按钮，以替换右上角或控件的“tr”属性。我还没有找到解决方案，因为以前的版本会导致整个框架停止运行。

我已经为以前的 FabricJS 版本找到了我的问题的解决方案，这些版本现在在 Fabric 3.0.0 中已过时。提供的链接是我遇到的确切问题，我只需要更新框架的当前版本。更新所需的解决方案：在 Canvas Fabric JS 中的元素上添加删除按钮

标签： javascriptjqueryhtmlcanvasfabricjs

Answer 1

我尝试了与 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();
    }
});