레이어 된 캔버스의 패브릭 개체 선택

캔버스를 기본 html 개체 (이 경우 테이블) 위에 겹쳐 놓으면 패브릭 개체 선택에 문제가 있습니다. 나는 아래에 전체 코드를 포함시켰다. 이것을 크롬에서 실행하고 텍스트 객체를 캔버스에 추가하면 조작 할 객체를 선택할 수 없습니다.레이어 된 캔버스의 패브릭 개체 선택

크롬 개발자 도구를 열고 개체를 선택하려고하면 이상한 부분이 선택됩니다.

내가 뭘 잘못하고 있니?

<!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>

출처

2013-09-05 Sarvesh

당신은 바이올린을 만들 수 있습니까? –

jsfiddle에서 이벤트를 처리하는 데 문제가있었습니다. 위의 코드를 파일에 붙여 넣으면 작동합니다. – Sarvesh

캔버스를 다시 배치 한 후에 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'); 
....

출처

2013-09-05 06:49:37 Sarvesh

레이어 된 캔버스의 패브릭 개체 선택

답변

관련 문제