GoJs Pictures 官方介绍文档

最新推荐文章于 2022-03-09 09:27:49 发布

韩三岁的博客

最新推荐文章于 2022-03-09 09:27:49 发布

阅读量1.2k

点赞数

原文链接：https://blog.csdn.net/qq_35821988/article/details/81204897

版权

图片

使用Picture类显示图像。最常见的用法是使用URL字符串设置Picture.source属性，以及通过GraphObject.desiredSize（图对象的所需尺寸）获取或通过设置GraphObject.width（图对象的宽）和GraphObject.height（图对象的高）这两个属性改变图片参数。

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

在这些简单的演示，该代码编程方式创建一个区域贴图，并将其添加到图中。如果你了解模型和数据绑定，一般就不会以编程方式创建区域贴图（节点或链接）。nodes or links

实际上，并不建议使用 $ 这个默认的符号，因为在Js 中，这个$太敏感。

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

图片是可以拖拉，缩放，通过Delete删除的，建议去官网进行体验。

但是，对于更复杂的控件，您可以将Picture.element设置为HTMLImageElement或HTML Canvas元素来进行处理。

Sizing

如果您没有设置图片的GraphObject.desiredSize，它将获得图片的自然大小。但是，当您将desiredSize设置为与自然大小不同时，
你还可以通过拉伸或压缩图片以使其适合你的需求。

以下图片均显示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 })
));

加载可能需要一段时间。在加载到足以知道其自然大小的时间之前，图片可能具有错误的大小，例如0x0。我们建议你指定desiredSize（或宽度和高度），以便在加载结束后，保持图片的面板不必重新排列。

对于您无法提前知道目标尺寸的情况，有其他方法比如拉伸图像以适应给定的空间。

图像拉伸

您可以设置Picture.imageStretch属性来控制绘制图像的大小和宽高比，而不是始终通过拉伸或压缩来满足自己需求的尺寸。

以下图片演示了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")
));

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

剪裁

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

第二种方法使用Panel.isClipping。 “Spot”面板上的此属性允许主Shape的填充区域用作剪切区域而不是绘制的形状。此方法不会更改图片的区域，但会影响对象的选取，只能选择绘制的区域; 未绘制的图像区域不能被选中。

对于第一种方式来说，区域 1 ， 2 都是可以被选中的，第二种方式只有区域二可以被选中。

diagram.layout = $(go.GridLayout);
diagram.initialContentAlignment = go.Spot.Center;
// 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 }
)
)
)
);

跨源图片

由于图片由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, "Vertical",
$(go.Picture, { desiredSize: new go.Size(580, 580), source: "images/tiger.svg" })
));
diagram.scale = 0.5;

此SVG元素未在其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;

工具：Google Translate

翻译人员： Kindear

韩三岁的博客

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
GoJs Pictures 官方介绍文档

图片使用Picture类显示图像。最常见的用法是使用URL字符串设置Picture.source属性，以及通过GraphObject.desiredSize（图对象的所需尺寸）获取或通过设置GraphObject.width（图对象的宽）和GraphObject.height（图对象的高）这两个属性改变图片参数。如果URL只是一个简单的常量字符串，则可以将字符串作为参数直接传递给GraphObject.make，而不是分配给“source”属性。两种方式都具有相同的效果...
复制链接

扫一扫