Question

我尝试使用子类化，如http://fabricjs.com/polaroid中的示例所示。

PolaroidPhoto子类只是在图像上添加了一个边框，如下面的小提琴所示：https://jsfiddle.net/gusy54rr/6/

   canvas = this.__canvas = new fabric.Canvas('c', {
    backgroundColor: '#333',
    HOVER_CURSOR: 'pointer'
  });

  var PolaroidPhoto = fabric.util.createClass(fabric.Image, {
    H_PADDING: 20,
    V_PADDING: 20,
    originX: 'center',
    originY: 'center',
    initialize: function(src, options) {
      this.callSuper('initialize', options);
      this.image = new Image();
      this.image.src = src;
    console.log("In initialize, src is:" + src);
      this.image.onload = (function() {
        this.width = this.image.width;
        this.height = this.image.height;
        this.loaded = true;
        this.setCoords();
        this.fire('image:loaded');
      }).bind(this);
    },
    _render: function(ctx) {
      if (this.loaded) {
        ctx.fillStyle = '#fff';
        ctx.fillRect(
          -(this.width / 2) - this.H_PADDING,
          -(this.height / 2) - this.H_PADDING,
          this.width + this.H_PADDING * 2,
          this.height + this.V_PADDING * 2);
        ctx.drawImage(this.image, -this.width / 2, -this.height / 2);
      }
    }
  });
  var photo = new PolaroidPhoto('https://i.stack.imgur.com/cqmQ9.png', { });

 photo.on('image:loaded', canvas.renderAll.bind(canvas));

 photo.set('scaleX', 1);
 photo.set('scaleY', 1);
 photo.set('top', 180);
 photo.set('left', 150);
    console.log("photo,src is :" + photo.get('src'));

  // forcing src value (but ineffective)
 photo.set('src', 'https://i.stack.imgur.com/cqmQ9.png');

   canvas.add(photo);


canvas.add(
   rect= new fabric.Rect({ top: 50, left: 100, width: 50, height: 50, fill: '#f55' }),
 circle =   new fabric.Circle({ top: 140, left: 230, radius: 75, fill: 'green' }),
   triangle = new fabric.Triangle({ top: 300, left: 210, width: 100, height: 100, fill: 'blue' })
);

$("#group").on('click', function() {
    var activegroup = canvas.getActiveGroup();
    var objectsInGroup = activegroup.getObjects();

    activegroup.clone(function(newgroup) {
            canvas.discardActiveGroup();
            objectsInGroup.forEach(function(object) {
            canvas.remove(object);  
            });
            canvas.add(newgroup);

    });
});

$("#ungroup").click(function(){
   var activeObject = canvas.getActiveObject();
    if(activeObject.type=="group"){
            var items = activeObject._objects;
            alert(items);
            activeObject._restoreObjectsState();
            canvas.remove(activeObject);
            for(var i = 0; i < items.length; i++) {
                canvas.add(items[i]);
            items[i].dirty = true;
                canvas.item(canvas.size()-1).hasControls = true;
            }
        canvas.renderAll();
    }
});

它工作正常，直到我想用字符串化或用子类对象进行一些分组。

在小提琴中，我通过添加一些基础对象（矩形，圆形和三角形）完成了Fabric演示的示例。如果我选择子类图像和任何其他对象，然后单击组按钮：图像消失了。

未设置照片的scr属性（如＃34中的警告所示; ungroup＆＃34;对于前一组）。

画布的字符串化也表明＆＃34; src＆＃34;不见了。

即使我使用＆＃34; photo.set（＆＃39; src＆＃39;，...）＆＃34;强制（参见小提琴）src值。： - 分组仍然使图片消失。 - 字符串化仍然缺少＆＃34; src＆＃34;属性。（我试图扩展到对象无效）

如何使用分组和字符串化来处理子类对象？谢谢你的帮助。

Answer 1

这是一个新的jsfiddle，显示正确的分组和JSON加载与子类（PolaroidPhoto）图像。面料版本是1.7.19 https://jsfiddle.net/rpzk7wL6/2/

我在代码中添加了一些注释以显示我的修改。前一个脚本中的主要问题是缺少fromObjects（）方法。我还添加了一个处理器＆＃34; image：loaded＆＃34;到创建的子类实例来自fromObjects，以便在加载后呈现它。

$results << A.instance_variable_get(:@a)
$results << A.class_variable_get(:@@a)

puts $results.sort!

# 1
# 2
# 3

class B < A
  def initialize
    $results << super
  end
end


A.new
# define class A and get the instance variable 11 from the initialize method
$results <<  A.new.instance_variable_get(:@a)
# define class A and get the instance variable 22 from the initialize method
$results <<  A.class_variable_get(:@@a)

# here class B inherits from class A and use the `super` to call the `initialize` method of the parent class A, 
# this way you can retrieve the instance variable `a = 33` from the initialize method on Class A.
B.new

puts $results.sort!

# 1
# 2
# 3
# 11
# 22
# 33

由于

对子类化对象

1 个答案: