Невозможно добавить изображение в группу js fabric - PullRequest
Новая
       8

Невозможно добавить изображение в группу js fabric

1 голос
/ 03 июля 2019

Здравствуйте, я пытаюсь добавить изображение в группу из круга и текста и, наконец, добавить группу на холст, но показ изображения не выполняется.Может кто-нибудь сказать мне, в чем проблема?Вот фрагменты 

const canvas = new fabric.Canvas('canvas', {
  selection: false
});

const circle = new fabric.Circle({
  left: 100,
  top: 100,
  radius: 50,
  fill: '#eef',
  originX: 'center',
  originY: 'center'
});

const img = new Image();
img.src = '/Content/assets/img/logo.png';
const newImage = new fabric.Image(img, {
    left: circle.left + 15,
    top: circle.top,
    perPixelTargetFind: true,
    padding: 2,
    hasBorders: false,
    hasControls: false,
    width: 20,
    height: 30,
    originX: 'center',
    originY: 'center',
});


const text = new fabric.Text('Hello World', {
    left: circle.left,
    top: circle.top,
    fontFamily: 'Arial',
    fontWeight: 'bold',
    fontSize: 10,
    fill: 'black',
    originX: 'center',
    originY: 'center',
});

const group = new fabric.Group([circle, text, newImage], {
    left: circle.left,
    top: circle.top,
    originX: 'center',
    originY: 'center'
});

canvas.add(group);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>

1 Ответ

1 голос
/ 03 июля 2019

Потому что вы передаете объект изображения вместо источника. Сделай это 

fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
 canvas.add(img1); 
});


const canvas = new fabric.Canvas('canvas', {
  selection: false
});

fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
 var img1 = img.set({ left: 0, top: 0 ,width:200, height:350});
 canvas.add(img1); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="canvas" width="500" height="300" style="border: 2px solid green;"></canvas>

new fabric.Image(img, здесь img должна быть строкой. Не экземпляр изображения

Чтобы добавить это изображение в группу, выполните 

let ImageInstance;
fabric.Image.fromURL('http://placekitten.com/200/300', function(img) {
   var img1 = img.set({ left: 0, top: 0 ,width:200, height:350});
   ImageInstance = img1;
});
if (ImageInstance){ 
   const group = new fabric.Group([circle, text, ImageInstance], {
       left: circle.left,
       top: circle.top,
       originX: 'center',
       originY: 'center'
   });
   canvas.add(group);
}
...