Изображения Fabric.js действуют как статические (не перетаскиваемые или изменяемые по размеру) при добавлении

Попытка узнать Ткань ... это должно быть легко. Просто сделайте фоновое изображение, а затем добавьте то же изображение на холст. Но изображение не имеет элементов управления и не может быть изменено или перетащено. Я включил canvas.calcOffset(), который был рекомендован в соответствующей статье с той же проблемой.Изображения Fabric.js действуют как статические (не перетаскиваемые или изменяемые по размеру) при добавлении

<html> 
<body> 
<script src="fabric.js"></script> 
<canvas id="canvas" width="800" height="600" style="border:1px solid #000000"></canvas> 
<script>  

var canvas = new fabric.Canvas('canvas'); 
canvas.selection = true; 

canvas.setBackgroundImage('raj.jpg', canvas.renderAll.bind(canvas)); 

fabric.Image.fromURL('raj.jpg', function(ghost) { 
ghost.set({ left: 455, top: 355}); 
ghost.setOpacity(.5); 
ghost.transparentCorners = false; 
canvas.add(ghost).renderAll(); 
canvas.setActiveObject(ghost); 
canvas.calcOffset() 
}); 

</script>

источник

2013-12-01 user3055135

Какая версия ткани? Убедитесь, что вы используете последнюю версию, так как были проблемы с обнаружением сенсорного устройства Chrome, подключенного к компьютеру (мы исправили его в Fabric в последних выпусках). – kangax

Да, вы можете попробовать это один

<form id="overlay_form"> 
      <h2>Upload Image</h2> 
      <input type="file" id="imgLoader"><br> 
     </form>

Это код HTML части

Ниже код может быть использован для добавления изображения на холст для перетаскивания изменение размера.

document.getElementById('imgLoader').onchange = function handleImage(e) { 
     var reader = new FileReader(); 
     reader.onload = function (event) { 
      var imgObj = new Image(); 
      imgObj.src = event.target.result; 
      imgObj.onload = function() { 
       // start fabricJS stuff 
       var image = new fabric.Image(imgObj); 
       image.set({ 
        angle: 0, 
        padding: 10, 
        cornersize: 10, 
        height: 250, 
        width: 400, 
       }); 
       //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 
       canvas.add(image); 
       // end fabricJS stuff 
      } 
     } 
     reader.readAsDataURL(e.target.files[0]); 

    }

источник

2014-10-17 11:50:13 jithin

Изображения Fabric.js действуют как статические (не перетаскиваемые или изменяемые по размеру) при добавлении

ответ

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