代码之家 › 专栏 › 技术社区 › ServerSideSkittles

FabricJS以编程方式将循环图像添加到组中

fabricjs javascript

ServerSideSkittles · 技术社区 · 6 年前

我有一套信。这些字母构成了一个词。我循环访问数据ID以构建单词。

然而,我似乎不能把它们组合在一起。

如果我手动选择字母并尝试

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 回复 | 直到 6 年前

Durga 6 年前

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