Выбор объекта ткани на многоуровневом холсте

У меня возникла проблема с выбором объекта ткани, когда у меня есть холст, наложенный на базовые 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>

источник

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

Выбор объекта ткани на многоуровневом холсте

ответ

Смежные вопросы