将 sourceCrossOrigin 设置为所有图片

Question

我正在使用 Gojs 1.5.2。我正在从 S3 在我的 canvas 上加载图像。该存储桶具有 CORS。

当我使用 Diagram.makeImageData() 时，我得到的是空白而不是图像。这在这里解释 - makeImageData

解决方案是使用sourceCrossOrigin匿名，这似乎可行。

有没有办法在一个地方为我的所有图片类定义 sourceCrossOrigin 而不是每个图片？

Answer 1

许多示例使用称为 textStyle() 之类的函数来确保所有 TextBlock 都具有一致的属性集。有关示例，请参见 OrgChartEditor 中的代码。

// This function provides a common style for most of the TextBlocks.
// Some of these values may be overridden in a particular TextBlock.
function textStyle() {
  return { font: "9pt  Segoe UI,sans-serif", stroke: "white" };
}

然后像这样使用它：

...
$(go.TextBlock, textStyle(),
  { row: 2, column: 0 },
  new go.Binding("text", "key", function(v) {return "ID: " + v;})),
$(go.TextBlock, textStyle(),
  { row: 2, column: 3, },
  new go.Binding("text", "parent", function(v) {return "Boss: " + v;})),
$(go.TextBlock, textStyle(),  // the comments
  {
...

或者，您可以覆盖图片。这是一个例子：

function CustomPicture() {
  go.Picture.call(this);
  this.sourceCrossOrigin = function() { return 'anonymous' };
}
go.Diagram.inherit(CustomPicture, go.Picture);

然后到处使用$(CustomPicture,...而不是$(go.Picture,...

将 sourceCrossOrigin 设置为所有图片

Set sourceCrossOrigin to all Pictures

gojs