Question

当我将画布分层放在底层html对象（在本例中为表格）时，我面临着布料对象选择的问题。我在下面列出了整个代码。如果我在chrome中运行它并将一个文本对象添加到画布，我无法选择要操作的对象。

如果我打开chrome dev工具然后尝试选择对象，那么奇怪的部分就是选择。

我做错了什么？

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://codeorigin.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"></script>
<title></title>
<script type="text/javascript">
    $(function () {
        selected = false;
        flag = true;

        windowWidth = window.screen.width;
        $("#can").attr('width')

        $("#controls").css("right", windowWidth - $("#can").attr('width') - $("#controls").width() -100 + "px");
        $('.freeform').on('click', function (event) {
            flag = true;
        });

        $('.text').on('click', function (event) {
            flag = false;
        });


        mouse = {
            x: 0,
            y: 0
        };
        last_mouse = {
            x: 0,
            y: 0
        };
        fcanvas = new fabric.Canvas('can');
        fcanvas.selection = false
        fcanvas.renderOnAddRemove = true
        $(".upper-canvas").css("postion", "absolute");
        $(".upper-canvas").css("top", "0px");
        $(".upper-canvas").css("left", "0px");
        $(".canvas-container").removeAttr("style");

        ocanvas = document.querySelector('.upper-canvas');
        ocanvas.addEventListener('mousemove', function (e) {
            last_mouse.x = mouse.x;
            last_mouse.y = mouse.y;
            mouse.x = e.pageX - this.offsetLeft;
            mouse.y = e.pageY - this.offsetTop;
        }, false);

        fcanvas.on('mouse:down', function (e) {
            var inp, text;
            if (!selected) {
                if (flag) {
                    return fcanvas.on('mouse:move', function () {
                        var l;
                        if (!selected) {
                            l = new fabric.Line([last_mouse.x, last_mouse.y, mouse.x, mouse.y], {
                                stroke: 'red',
                                selectable: false
                            });
                            fcanvas.add(l);
                        }
                    });
                } else {
                    inp = window.prompt("Type Text", "Text");
                    text = new fabric.Text(inp, {
                        left: e.e.clientX,
                        top: e.e.clientY
                    });
                    flag = true;
                    fcanvas.add(text);
                    fcanvas.bringToFront(text);
                    fcanvas.setActiveObject(text);
                }
            }
        });

        fcanvas.on('object:selected', function (e) {
            selected = true;
        });

        fcanvas.on('selection:cleared', function (e) {
            selected = false;
        });

        fcanvas.on('mouse:up', function () {
            if (flag) {
                fcanvas.off('mouse:move');
            }
        });
    });
</script>
<style type="text/css">
    .canvas-container{
        position:absolute;
        top:0px;
        left:0px;
        z-index:1000;
        width:400px;
        height:400px;
    }
    .upper-canvas{
        position:absolute;
        top:0px;
        left:0px;
        z-index:1100;
    }

    .lower-canvas{
      z-index:1100;
    }

    .container{
      position:absolute;
      top:0px;
      left:0px;
      z-index:1000;
      width:400px;
      height:400px;
    }
</style>
</head>
<body>  
<div id="controls" style="position:absolute;"><a class='freeform'>Freeform</a><br /><a class='text'>Add Text</a></div>
<table width="400px" height="400px" border=1>
<tr width="100%">
    <td>C1</td><td>C2</td>
</tr>
<tr>
    <td>R1C1</td><td>R1C2</td>
</tr>
<tr>
    <td>R2C1</td><td>R2C2</td>
</tr>
</table>
<canvas id="can" width="400" height="400" style="postion:absolute;top:0px;left:0px;"> </canvas>
</body>
</html>

Answer 1

重新定位画布后调用calcOffset（）似乎可以解决问题。

....
fcanvas.renderOnAddRemove = true
$(".upper-canvas").css("postion", "absolute");
$(".upper-canvas").css("top", "0px");
$(".upper-canvas").css("left", "0px");
$(".canvas-container").removeAttr("style");

fcanvas.calcOffset();

ocanvas = document.querySelector('.upper-canvas');
....

分层画布上的Fabric对象选择

1 个答案: