FabricJS добавляет зацикленные изображения для программной группировки - PullRequest
Новая
       6

FabricJS добавляет зацикленные изображения для программной группировки

0 голосов
/ 23 мая 2018

У меня есть набор букв.Слово построено из этих букв.Я перебираю идентификаторы данных, чтобы построить слово.

Однако я не могу сгруппировать их.

Если я вручную выберу буквы и попробую 

canvas.getActiveObject().toGroup();
canvas.requestRenderAll();

, они сгруппируют их вместе.

Но мне нужно сделать это программно и при добавлении 

canvas.add(img).setActiveObject();

он будет выбирать только последний объект, добавленный на холст.

Вот моя функция для построения слова 

function buildImage(i) {

  var wordo = jQuery('*[data-id="' + wordArray[i] + '"]').attr('src');

  fabric.Image.fromURL(wordo, function(img, letterWidth) {
    // fabric.Image.fromURL(tiles[i], function (img) {
    img.scale(scaleO).set({
      left: offset[i],
      top: wordPositionY,
      selectable: true,
      cornerStyle: 'circle',
      cornerColor: '#f6ff00',
      cornerStrokeColor: '#f6ff00',
      transparentCorners: false,
      borderColor: '#f9f60b',
      cornerSize: 22,
      hasRotatingPoint: true,
      id: 'letter'
    });

    img.setControlsVisibility({
      mt: false,
      mr: false,
      mb: false,
      ml: false
    });

    canvas.add(img);

  });
}

, а вот цикл, который вызывает его 

for (var i = 0; i < letters; i++) {
  buildImage(i);
}

Я хочу добавить эти буквы на холст в виде группы, которая также может быть разгруппирована при необходимости.Есть ли способ сделать это?

Вот мой JSfiddle

1 Ответ

0 голосов
/ 23 мая 2018

Поскольку fabric.Image.fromURL является асинхронным, поэтому вам нужно подождать, пока все загруженные изображения, после загрузки всех изображений создать группу всех изображений. 

$(document).ready(function() {

  canvasWidth = 448;
  canvasHeight = 390;

  canvas = new fabric.Canvas('c', {
    width: canvasWidth,
    height: canvasHeight,
    containerClassName: 'c',
    selection: true,
    preserveObjectStacking: true,
  });


  var word = 'abc';
  let letters = word.length;
  let imageLoaded = 0;
  var letterWidth = canvas.width / letters;
  var numArr = [];

  var wordArray = word.split("");
  var offset = [
    0,
    letterWidth,
    letterWidth * 2,
    letterWidth * 3,
    letterWidth * 4,
    letterWidth * 5,
    letterWidth * 6,
    letterWidth * 7,
    letterWidth * 8,
    letterWidth * 9,
    letterWidth * 10,
    letterWidth * 11,
    letterWidth * 12,
    letterWidth * 13,
  ];


  for (var i = 0; i < letters; i++) {

    buildImage(i);

  }

  let imageData = [];

  var scaleO = letterWidth / 448;
  var wordPositionY = (canvasHeight - letterWidth) / 2
  // creates a new scope for the passed in value of i when called:

  function buildImage(i) {

    var wordo = jQuery('*[data-id="' + wordArray[i] + '"]').attr('src');

    fabric.Image.fromURL(wordo, function(img, letterWidth) {
      // fabric.Image.fromURL(tiles[i], function (img) {
      img.scale(scaleO).set({
        left: offset[i],
        top: wordPositionY,
        id: 'letter'
      });

      img.setControlsVisibility({
        mt: false,
        mr: false,
        mb: false,
        ml: false
      });
      imageData.push(img);
      if (letters == ++imageLoaded) {
        setGroup();
      }
    });
  }

  function setGroup() {
    let group = new fabric.Group(imageData, {
      top: 100,
      selectable: true,
      cornerStyle: 'circle',
      cornerColor: '#f6ff00',
      cornerStrokeColor: '#f6ff00',
      transparentCorners: false,
      borderColor: '#f9f60b',
      cornerSize: 22,
    })
    canvas.add(group)
    imageData = [];
  }
});
body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 450px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

#c {
  background: #e6e6e6;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
  <p>My Canvas</p>
  
  <canvas id="c"></canvas>
  
</div>


<div class="letters">
  <img src="https://i.imgur.com/7lXiKkD.png" height="32" id="theme_img" data-id="a" alt="">
  <img src="https://i.imgur.com/gMqYdMB.png" height="32" id="theme_img" data-id="b" alt="">
  <img src="https://i.imgur.com/1CMBCqv.png" height="32" id="theme_img" data-id="c" alt="">
</div>
...