Question

我一直在使用JointJS一段时间，我正在尝试为我的元素创建一个HTML模板。所以我一直在使用tutorial，但它没有放弃为我做这件事。我想要完成的是在执行操作时调整HTML元素的颜色，例如双击元素。我确实注意到教程中文本的更改方式，但没有更改任何颜色的示例。

修改

我试过这个来获得元素的起始颜色：

joint.shapes.html = {};
joint.shapes.html.OdinElement = joint.shapes.basic.Rect.extend({
  defaults: joint.util.deepSupplement({
    type: 'html.Element',
    attrs: {
      rect: { stroke: 'none', 'fill-opacity': 0 }
    }
  }, joint.shapes.basic.Rect.prototype.defaults)
});

// Create a custom view for that element that displays an HTML div above it.
// -------------------------------------------------------------------------

joint.shapes.html.OdinElementView = joint.dia.ElementView.extend({

  template: [
    '<div class="html-element">',
    '<button class="delete">x</button>',
    '<label></label>',
    '<span></span>', '<br/>',
    '</div>'
  ].join(''),

  initialize: function() {
    _.bindAll(this, 'updateBox');
    joint.dia.ElementView.prototype.initialize.apply(this, arguments);

    this.$box = $(_.template(this.template)());

    this.$box.find('.delete').on('click', _.bind(this.model.remove, this.model));
    // Update the box position whenever the underlying model changes.
    this.model.on('change', this.updateBox, this);
    // Remove the box when the model gets removed from the graph.
    this.model.on('remove', this.removeBox, this);

    this.updateBox();
  },
  render: function() {
    joint.dia.ElementView.prototype.render.apply(this, arguments);
    this.paper.$el.prepend(this.$box);
    this.updateBox();
    return this;
  },
  updateBox: function() {
    // Set the position and dimension of the box so that it covers the JointJS element.
    var bbox = this.model.getBBox();
    // Example of updating the HTML with a data stored in the cell model.
    this.$box.find('label').text(this.model.get('label'));

    this.$box.css({ width: bbox.width, height: bbox.height, left: bbox.x, top: bbox.y, transform: 'rotate(' + (this.model.get('angle') || 0) + 'deg)', background: this.model.get('color')}); // I've tried to add it like a background
  },
  removeBox: function(evt) {
    this.$box.remove();
  }
});

//add a new element like this
new joint.shapes.html.OdinElement({
    position: { x: 80, y: 80 },
    size: { width: 200, height: 50 },
    label: 'label',
    color: '#ff0000'
  });

我也尝试将其设置为标签中设置的文本，但我不知道是否有功能。

有没有人知道如何做到这一点？

非常感谢！

添

Answer 1

我自己找到了答案！

显然，不允许在html变量中创建与给定Element不同的元素。所以我必须将joint.shapes.html.OdinElement更改为joint.shapes.html.Element，将joint.shapes.html.OdinElementView更改为joint.shapes.html.ElementView

现在一切正常：）

感谢您的帮助！

如何更改自定义模板JointJS元素的CSS？

修改

1 个答案: