AUBREY

SOMETIMES LOVE JUST AIN'T ENOUGH

GOJS 官方教程之:Pictures(图片)

英文官网链接:https://gojs.net/latest/intro/pictures.html

注:翻译仅供参考~ 所有“显示结果”都是截图,不可交互,要看交互效果请点击上面的官网链接

图片(Pictures)


Picture类可以用来显示图片。最常见的用法是把Picture.source属性设置为一个URL字符串,同时设置GraphObject.desiredSize或者GraphObject.widthGraphObject.height


如果URL只是一个字符串常量,你可以把这个字符串直接传参给GraphObject.make,这比指定“source”属性更加方便。不过两种设置方式的效果是一样的。


在下面这些简单的示例中,编程式地创建了一个Part并把它添加到了Diagram中。一旦你学习了模型和数据绑定,你一般不会再这样编程式地创建part(node或link)了。

diagram.add(
    $(go.Part,
      $(go.Picture, "images/100x65.png")
    ));

image.png

然而,你可以Picture.element设置为一个HTML Image元素或者HTML Canvas元素来实现更多复杂的图片控制。


尺寸(Sizing)


如果你不给一张Picture设置GraphObject.desiredSize,图片的大小就会是它实际的像素大小。但是如果你把desiredSize设置为与图片的实际尺寸不一样的尺寸时,图片可能会被压缩或者拉伸来适应你设置的尺寸。


下面这些图片展示了同一张大小为100×65像素的小猫图片。

  • 第一张展示了图片的实际尺寸

  • 第二张也是展示实际尺寸,只不过把desiredSize也设置为它的实际尺寸了

  • 第三张图片尺寸加大了,导致了图片被拉伸

  • 第四章把尺寸从100×65像素压缩为50×32.5像素了——一半打尺寸,保持了图片原始的宽高比

  • 最后一张把尺寸设置为了50×70,导致了图片的宽高比例变化:比原来高比原来窄了

diagram.add(
    $(go.Part, "Table",
      $(go.Picture, { source: "images/100x65.png", column: 0,
                      margin: 2 }),
      $(go.TextBlock, "natural", { row: 1, column: 0 }),
      $(go.Picture, { source: "images/100x65.png", column: 1,
                      width: 100, height: 65, margin: 2 }),
      $(go.TextBlock, "same size", { row: 1, column: 1 }),
      $(go.Picture, { source: "images/100x65.png", column: 2,
                      width: 200, height: 130, margin: 2 }),
      $(go.TextBlock, "bigger", { row: 1, column: 2 }),
      $(go.Picture, { source: "images/100x65.png", column: 3,
                      width: 50, height: 32.5, margin: 2 }),
      $(go.TextBlock, "smaller", { row: 1, column: 3 }),
      $(go.Picture, { source: "images/100x65.png", column: 4,
                      width: 50, height: 70, margin: 2 }),
      $(go.TextBlock, "stretched", { row: 1, column: 4 })
    ));

image.png

注意,媒体加载可能需要一点时间。在媒体完全加载前,我们可能无法的值图片的实际尺寸,图片的尺寸可能是错的,可能会是0x0。因此,我们建议你指定desiredSize(或者指定宽度和高度)以便于Panel先不显示图片直到没媒体加载完毕。


然后有时候,当你不能够提前直到图片的实际尺寸时,有其他的方法可以把图片拉伸到适应给定的空间。


图片拉伸(Image Stretch)


相较于经常拉伸或者压缩图片以适应给到的desiredSize,你可以设置Picture.imageStretch属性来控制绘制的图片的大小和纵横比。


下面的示例展示Picture.imageStretch的4种可能的值。所有这4张图的给定尺寸都是60×80,也是同一个100×65的PNG文件。它们也都有浅绿色的背景图,以展示可能会留出的未使用的空间,但是绿色的部分仍旧属于Picture的一部分。

  • 图1,展示了默认的行为,纵横方向上都拉伸了。注意,相较于它原本的尺寸图片被扭曲了变窄了。但是,整张图片都展示出来了。由于图片填充了整个区域,且图片是非透明的,所以我们看不到浅绿色的背景。

  • 图2,我们把imageStretch设置为了GraphObject.None,它就只是展示了小猫图片的一部分。因为desiredSize尺寸比图片的原始尺寸小,所以图片被剪裁了。

  • 图3,我们把imageStretch设置为了GraphObject.Uniform,确保了整张图片都被展示出来,作为代价,图片的比例被减小了且在顶部和底部留出了一些空间。在这个案例中,由于图片的原始纵横比比可用的60×80的纵横比宽,所以顶部和底部留出了空间。

  • 图4,我们把imageStretch设置为了GraphObject.UniformToFill,确保了整个区域都被图片填充了,但是图片只显示了一部分,图片四周可能都被剪裁了。这样设置图片一般会比图3那样的设置比例大。在这个示例中,图片的两侧被剪裁了。

  • 图5,有一个单独的Part,我们放了原始的图片,原始的尺寸,便于对比。

image.png

当图片被剪裁时,我们可以通过使用Picture.imageAlignment来控制图片的哪部分需要被绘制出来。


剪裁(Clipping)


如果你有一张图片必须要剪裁为几何形状,比如说圆形,你有两个选择。


方法一,你可以用一个几何“框架”来隐藏图片的其余部分。通常这个框架与图表背景或节点的背景颜色相同。这种方法,不会改变图片的区域大小,不允许真正的透明度,并且点击框架边界的任何地方都会选中图片。

方法二,是使用Panel.isClipping。这个“Spot” Panel的属性允许主要的Shape的填充区域作为一个剪裁区域,而不是一个绘制的形状。这个方法也不改变图片的区域大小,但是允许透明度。它会影响对象的选中,使得只有绘制出来的图片部分才能被选中,点击剪裁隐藏的部分也不会选中图片。

请见以下示例:

 diagram.layout = $(go.GridLayout);
  diagram.initialContentAlignment = go.Spot.Center;  
  
  // 使用了一个黑色的几何“框架” 来隐藏图片的其余部分
  // 通常这个框架与图表背景或节点的背景颜色相同
  diagram.add(
    $(go.Part, "Spot",
      { scale: 2 },
      $(go.Picture, "../samples/images/55x55.png",
        {
          name: 'Picture',
          desiredSize: new go.Size(55, 55),
          background: 'red'
        }
      ),
      $(go.Shape,
      {
        strokeWidth: 0,
        stroke: null,
        geometryString: "f M0 0 L100 0 L100 100 L0 100 z M5,50a45,45 0 1,0 90,0a45,45 0 1,0 -90,0 z",
        width: 56,
        height: 56,
        fill: 'black'
      })
    )
  );  
  
  // 使用Panel.isClipping方法
  diagram.add(
    $(go.Part, "Spot",
      { isClipping: true, scale: 2  },
      $(go.Shape, "Circle", { width: 55, strokeWidth: 0 } ),
      $(go.Picture, "../samples/images/55x55.png",
        { width: 55, height: 55 }
       )
    )
  );  
  
  // 使用Panel.isClipping的同时外面外圈有一个panel
  diagram.add(
    $(go.Part, "Spot",
      { scale: 2 },
      $(go.Shape, "Circle", { width: 65, strokeWidth: 0, fill: 'red' } ),
      $(go.Panel, "Spot",
        { isClipping: true  },
        $(go.Shape, "Circle", { width: 55, strokeWidth: 0 } ),
        $(go.Picture, "../samples/images/55x55.png",
          { width: 55, height: 55 }
         )
      )
    )
  );

image.png

跨域图片(Cross Origin Pictures)


由于Picture是由HTML Image元素支持的,它们必须遵循图片的跨域资源共享原则(CORS:Cross-Origin Resource Sharing)。如果你使用的图片适用于CORS原则,你就需要把Picture.sourceCrossOrigin属性设置为一个返回适当的值的函数。如果提供了sourceCrossOrigin ,那函数返回的值就会被当成构造的 image.crossOrigin值使用 。

例如:

 $(go.Picture,
     { width: 64, height: 64 },
     { sourceCrossOrigin: function(pict) { return "use-credentials"; } },     
     new go.Binding("source", "path"))

通常,返回的值是“use-credentials”和“anonymous”,但是也有些情况可能需要调用另外的值。我们建议你去cross-origin resource sharing 搜索并决定你的情况应该使用什么值。


如果你在使用 Diagram.makeImage Diagram.makeImageDataDiagram.makeSvg,然后你看到空白或者缺失的图片,请首先考虑并研究与跨域相关的问题。


使用SVG作为图片的源文件(Using SVG as a Picture source)


几乎所有的浏览器都支持SVG作为图片的源文件,但是在很多浏览器中你必须:

  • 为SVG元素指定width和height属性。这些值必须是整数(Firefox下必须)

  • 为Picture元素指定desiredSize值,这个值必须与SVG元素的宽度和高度一样(IE下必须)


首先,下面的SVG元素指定了width和height属性,然后又为Picture设置了desiredSize。这样就能在大部分的浏览器下显示图片了:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="580" height="580">
  ...
diagram.add(
    $(go.Part, "Vertical",
      $(go.Picture, { desiredSize: new go.Size(580, 580), source: "images/tiger.svg" })
    ));
  diagram.scale = 0.5;

image.png

如果不为SVG指定width和height属性,会大致不部分浏览器都不渲染图片:

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  ...
 diagram.add(
    $(go.Part, "Vertical",
      $(go.Picture, { source: "images/tiger-noWidthHeightSpecified.svg" })
    ));
  diagram.scale = 0.5;

image.png

发表评论

电子邮件地址不会被公开。 必填项已用*标注