流程图控件GoJS教程:使用Picture属性显示图像

翻译|使用教程|编辑:吴园园|2019-08-22 10:02:00.060|阅读 67 次

概述:本教程将为您介绍如何使用使用Picture属性显示图像。

相关链接:

GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新试用版

使用Picture类显示图像。最常见的用法是使用URL字符串设置Picture.source属性,以及GraphObject.desiredSize或GraphObject.width和GraphObject.height。

如果URL只是一个简单的常量字符串,您可以直接将字符串作为参数传递给GraphObject,make,而不是分配“source:”属性。两种技术都具有相同的效果。

在这些简单的演示中,代码以编程方式创建一个Part并将其添加到Diagram中。了解模型和数据绑定后,通常不会以编程方式创建部件(节点或链接)。

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

但是,对于更复杂的控件,您可以将Picture.element设置为HTMLImageElementHTMLCanvasElement

流程图控件GoJS教程:使用Picture属性显示图像

尺寸

压缩图片以适应。

  • 以下图片均显示了100x65像素的小猫图片。

  • 第一张图片以自然尺寸显示图像。

  • 第二张图片还以自然尺寸显示图像,但显式设置了所需的尺寸。

  • 第三张图片增加了图片的大小,使图像均匀展开。

  • 第四张图片将100x65图像压缩成50x32.5空间 - 半尺寸。这也保持了图像的原始宽高比。

  • 最后一张图片将图片大小设置为50x70,这会将宽高比更改为比原始更高更薄。

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 })
   ));

流程图控件GoJS教程:使用Picture属性显示图像

请注意,加载媒体可能需要一段时间。在媒体加载到足以知道其自然大小的时间之前,Picture可能具有错误的大小,例如0x0。我们建议您指定desiredSize(或宽度和高度),以便在加载介质后,保持图片的面板不必重新排列。

然而,对于您无法提前知道自然尺寸的时代,有其他方法可以拉伸图像以适应给定的空间。

图像拉伸

您可以设置Picture.imageStretch属性来控制绘制图像的大小和宽高比,而不是始终拉伸或压缩以填充desiredSize 。

以下图片演示了Picture.imageStretch的四个可能值。这里的所有四张图片的大小均为60x80,并显示相同的100x65 PNG文件。图片也有浅绿色背景,以显示可能未使用的可用空间,但仍然是图片边界的一部分。

  • 第一张图片演示了默认行为,可以向两个方向拉伸。请注意图像如何变形以使其比应有的更窄。但是,显示了所有图像。由于图像填充整个区域并且图像不是半透明的,因此背景颜色不会显示在任何地方。

  • 您可以在第二张图片中看到,使用GraphObject.None的imageStretch ,它如何只显示整个小猫图像的一小部分。因为desiredSize小于图像的自然尺寸,所以图像的一部分被剪裁。

  • 第三张图片显示了GraphObject.Uniform imageStretch将如何确保显示所有图像,但代价是减小比例并在侧面或顶部和底部留下一些空白空间。在这种情况下,由于自然图像宽高比比可用的60x80宽高比宽,因此空白区域将位于顶部和底部。

  • 第四张图片显示了GraphObject.UniformToFill imageStretch 如何确保整个区域被图像占据,但并非所有图像都被显示,因为有些图像可能会被剪裁在侧面或顶部和底部。这些图像通常比使用Uniform imageStretch时具有更大的比例。在这种情况下,必须剪裁的是图像的两侧。

  • 最后,有一个单独的部分包含原始图像,自然大小,用于比较。

 diagram.add(
   $(go.Part, "Table",
     $(go.Picture, "images/100x65.png",
       { column: 0, width: 60, height: 80, margin: 2, background: "chartreuse",          imageStretch: go.GraphObject.Fill }),
     $(go.TextBlock, "Fill", { row: 1, column: 0 }),
     $(go.Picture, "images/100x65.png",
       { column: 1, width: 60, height: 80, margin: 2, background: "chartreuse",          imageStretch: go.GraphObject.None }),
     $(go.TextBlock, "None", { row: 1, column: 1 }),
     $(go.Picture, "images/100x65.png",
       { column: 2, width: 60, height: 80, margin: 2, background: "chartreuse",          imageStretch: go.GraphObject.Uniform }),
     $(go.TextBlock, "Uniform", { row: 1, column: 2 }),
     $(go.Picture, "images/100x65.png",
       { column: 3, width: 60, height: 80, margin: 2, background: "chartreuse",          imageStretch: go.GraphObject.UniformToFill }),
     $(go.TextBlock, "UniformToFill", { row: 1, column: 3 })
   ));  // The original image sized naturally, for comparison
 diagram.add(
   $(go.Part, "Vertical",
     $(go.Picture, "images/100x65.png"),
     $(go.TextBlock, "Original image,\nsized naturally")
   ));

流程图控件GoJS教程:使用Picture属性显示图像

剪切图像时,您可以使用Picture.imageAlignment属性控制图像的哪个部分。

剪裁

如果您的图片必须剪裁为几何图形,例如生成圆形图像,则有两个选项。第一种是使用“框架”几何体来隐藏部分图像。通常,此框架与图表背景或节点背景颜色相同。此方法不会更改图片的区域,不允许真正的透明度,并且单击边界中的任何位置将始终选择图片。

第二种方法使用Panel.isClipping。“Spot”面板上的此属性允许主Shape的填充区域用作剪切区域而不是绘制的形状。此方法不会更改图片的区域,但允许透明度它会影响对象拾取,以便只能获取合成的绘制区域; 未绘制的图像区域不能“被击中”。

以下两个例子如下:

 diagram.layout = $(go.GridLayout);  // Using a black "frame" geometry to hide part of the image.
 // Typically this frame is the same color as the Diagram background or the background of the Node.
 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'
     })
   )
 );  // Using 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 }
      )
   )
 );  // Using Panel.isClipping and also having a surrounding 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 }
        )
     )
   )
 );

流程图控件GoJS教程:使用Picture属性显示图像

翻转

您可以使用Picture.flip属性水平和垂直翻转图像源:

 diagram.add(
   $(go.Part, "Table",
     $(go.Picture, { source: "images/100x65.png", column: 0, margin: 2,                      flip: go.GraphObject.None
                   }),
     $(go.TextBlock, "None (default)", { row: 1, column: 0 }),
     $(go.Picture, { source: "images/100x65.png", column: 1, margin: 2,                      flip: go.GraphObject.FlipHorizontal
                   }),
     $(go.TextBlock, "FlipHorizontal", { row: 1, column: 1 }),
     $(go.Picture, { source: "images/100x65.png", column: 2, margin: 2,                      flip: go.GraphObject.FlipVertical
                   }),
     $(go.TextBlock, "FlipVertical", { row: 1, column: 2 }),
     $(go.Picture, { source: "images/100x65.png", column: 3, margin: 2,                      flip: go.GraphObject.FlipBoth
                   }),
     $(go.TextBlock, "FlipBoth", { row: 1, column: 3 })
   ));

流程图控件GoJS教程:使用Picture属性显示图像

Cross Origin图片

由于图片由HTMLImageElements支持,因此它们必须遵守适用于图像的相同跨源(CORS)规则。如果您使用的图像适用于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”,但其他情况可能需要其他值或条件值。我们建议研究跨源资源共享,以确定适合您情况的内容。

如果您正在使用Diagram.makeImage,Diagram.makeImageData或Diagram.makeSvg,并且您看到空白或缺少图像,则首先要研究与CORS相关的问题。

使用SVG作为图片源

几乎所有浏览器都接受SVG文件作为图片源,但在许多浏览器中,您必须:

  • 将宽度和高度属性分配给SVG元素。这些值应该是整数。(Firefox必备)

  • 为Picture元素指定所需的大小,该大小必须与其width和height属性相同(Internet Explorer必需)。

该第一个SVG元素具有在其SVG元素中指定的宽度和高度,并且还具有其期望的大小集。它应该在大多数浏览器中显示:

< svg  xmlns = “http://www.w3.org/2000/svg” 
    xmlns:xlink = “http://www.w3.org/1999/xlink”
    width = “580”  height = “580” >
 。 ..

  diagram.add(
   $(go.Part,
     $(go.Picture,{ desiredSize:新 go.Size(580,580),源:“图像/ tiger.svg” })
   ));
 diagram.scale = 0.5 ;

流程图控件GoJS教程:使用Picture属性显示图像

此SVG元素未在其SVG元素中指定width和height属性,因此某些浏览器可能无法呈现它:

< svg  xmlns = “http://www.w3.org/2000/svg” 
    xmlns:xlink = “http://www.w3.org/1999/xlink” >
 ...


   diagram.add   ($(go.Part,
     $(go.Picture,{ source:“images / tiger-noWidthHeightSpecified.svg” })
   ));
 diagram.scale = 0.5 ;

流程图控件GoJS教程:使用Picture属性显示图像

更多GoJS相关教程,视频,资源请点击此处了解~

想要购买GoJS正版授权的朋友可以咨询慧都官方客服

更多精彩内容,敬请关注下方的微信公众号,及时获取产品最新资讯▼▼▼

图片2.jpg



标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果

文章转载自:GOJS https://gojs.net/latest/intro/pictures.html

登录慧都网发表评论登录


暂无评论...

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
相关厂商
相关产品
GoJS

GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图。

在线客服 在线QQ 电话咨询
400-700-1020
反馈
在线客服系统
live chat