GoJs 图片绘图模板Picture使用示例详解

更新时间：2023年05月05日 10:38:08 作者：沅芷湘兰

这篇文章主要为大家介绍了GoJs 图片绘图模板Picture使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

前言

前面已经说过了通过go.TextBlock(文本)和go.Shape(集合图形)来丰富节点内部的显示内容。而有些时候需要在节点内部上传一些说明材料，恰好这些材料又是图片材料。如果拿图片和节点信息对照观看的话，一一对照会特别麻烦.如果能够在节点内部显示缩略图的话。在信息对应上就会特别清晰。

go.Picture的使用

图片地址可以是本地图片和网络地址

import pic from '../../assets/img.jpg'//本地图片
let jj = "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"//掘金logo图片
$$(go.Picture,{ margin:5,source:jj }),
$$(go.Picture,{ width: 107, height: 22,margin:5,source:jj }),
$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic }),

go.Picture的属性

{ 
    width: 200,//图片模板的宽度
    height: 200,//图片模板的高度
    desiredSize: new go.Size(200, 300),//图片模板的宽高,设置的width和height会转换成desiredSize
    margin:5,//图片模板的外边距
    source:pic,//图片源,可以是本地图片,也可以是网络图片
    flip:go.GraphObject.None,//默认显示,或者水平、垂直反转
    imageStretch:go. GraphObject.Fill,// 设置图片的拉伸方式
    imageAlignment:go.spot.center,//在图片小于当前当前区域时候的对齐方式
 }

width、height、desiredSize属性

图片模板的宽高，其优先级以desiredSize最高，设置的width、height最后也是会转换成desiredSize。这里的宽高的设置和go.Shape不太相同的一点就是，图片不会以最短的一边为比例基准，保证图片不失真.而是会以设置的宽高为准，不考虑图片是否失真。其他类似于margin之类的通用属性则是正常生效

$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic }),
$$(go.Picture,{ width: 100, height: 200,margin:5,source:pic }),
$$(go.Picture,{ width: 200, height: 100,margin:5,source:pic }),

source属性

source属性是设置图片的url，可以是任何的图片(png,jpg等)的url。如果在加载图片的过程中没有设置desiredSize属性，则会重新加载.以图片的原始尺寸进行展示。其url可以是本地文件的相对地址，也可以是网络地址。其效果在上文中已经展示。

flip属性

flip属性为图片的反转属性,可以根据设置进行不同的反转。go.GraphObject.None为默认展示。go.GraphObject.FlipHorizontal为水平反转。go.GraphObject.FlipVertical为垂直反转。go.GraphObject.FlipBoth为对角线反转.

$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic,flip:go.GraphObject.None }),
$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic,flip:go.GraphObject.FlipHorizontal }),
$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic,flip:go.GraphObject.FlipVertical }),
$$(go.Picture,{ width: 200, height: 200,margin:5,source:pic,flip:go.GraphObject.FlipBoth }),

imageStretch、imageAlignment属性

imageStretch属性是对图片进行一个拉伸的操作，可以根据不同的属性设置不同的拉伸新效果。由下图可以看出。go.GraphObject.None属性是直接显示了图片的原始尺寸，并且显示的图片的正中心位置。go.GraphObject.Uniform则是以窄边(宽度)的150为基准，然后保证图片不失真并且在长边(高度)居中。go.GraphObject.UniformToFill则是以长边(高度)为基准，也是保证图片不失真的放大，填充到窄边(宽度)。go.GraphObject.Fill则是设置图片在可视区域的一个填充.图片会被拉伸失真。

$$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.None }),
$$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Uniform }),
$$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.UniformToFill }),
$$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Fill }),

而imageAlignment则是可以调整拉伸之后的图片的什么部位显示到渲染的区域。go.Spot.Top是显示居上。go.Spot.Center是显示居中。go.Spot.Bottom是显示居下。go.Spot.Left是显示居左。go.Spot.Right是显示居右。

$$(go.Panel,"Horizontal",
    $$(go.Shape,"Rectangle",{ width: 150, height: 200,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 150, height: 200,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 150, height: 200,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 200, height: 150,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 200, height: 150,margin:5,stroke:"#FF9900",fill:null}),
    $$(go.Shape,"Rectangle",{ width: 200, height: 150,margin:5,stroke:"#FF9900",fill:null}),
),
$$(go.Panel,"Horizontal",
    $$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Top }),
    $$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Center }),
    $$(go.Picture,{ width: 150, height: 200,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Bottom }),
    $$(go.Picture,{ width: 200, height: 150,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Left }),
    $$(go.Picture,{ width: 200, height: 150,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Center }),
    $$(go.Picture,{ width: 200, height: 150,margin:5,source:pic,imageStretch:go.GraphObject.Uniform,imageAlignment:go.Spot.Right }),
),

拓展

前面已经说过了几何图形的go.Shape模板，那么可不可以用go.Shape和go.Picture结合起来。来实现一个几何图形的图片显示呢?答案当然是可以的。

$$(go.Panel,"Spot",
    $$(go.Picture,{ desiredSize: new go.Size(200, 200),source:pic }),
    $$(go.Shape,{ width: 200, height: 200,stroke:"#FF9900",fill:"red",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',}),
)

红色区域就是我们的几个图形的区域，如果在节点内部我们设置我们的几何图形的区域的填充颜色为背景颜色，就可以实现裁剪出几何图形的图片了。如下图

结语

节点中添加图片可以暂时是一个缩略图，在后续可以配合点击事件和弹窗的形式显示大图。这样既可以让对应的图片对应在节点的信息之中，也可以查看图片的具体信息。让可视化图形的显示更加丰富。

以上就是GoJs 图片绘图模板Picture使用示例详解的详细内容，更多关于GoJs Picture图片绘图模板的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

layUI布局使用教程
layui属于轻量级框架,简单美化.是用于开发后端模式,它在服务端页面上有非常好的效果，这篇文章主要介绍了layUI布局使用教程,需要的朋友可以参考下
2022-09-09
JavaScript中的this指向和自定义属性详解
下面小编就为大家带来一篇js中的this指向和自定义属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2021-09-09
Object.keys()的用法示例详解
Object.keys()是遍历一个对象自身的属性名称(不包括继承属性)的最简单方法，这篇文章主要介绍了Object.keys()的用法,本文通过实例代码给大家介绍的非常详细，需要的朋友可以参考下
2023-07-07
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
这篇文章主要介绍了jQuery animate()实现背景色渐变效果的处理方法,结合实例形式分析了jQuery颜色插件jquery.color.js实现背景色渐变的简单操作技巧,需要的朋友可以参考下
2017-03-03
详解小程序如何动态绑定点击的执行方法
这篇文章主要介绍了详解小程序如何动态绑定点击的执行方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-11-11
详解JavaScript严格模式的使用方法
JavaScript的严格模式（Strict Mode）是一种在代码中启用的特殊模式，用于提供更严格的语法和错误检查，以改善代码质量和增强安全性，本文主要介绍JS的严格模式的用法，可以帮助大家避免一些常见的错误,需要的朋友可以参考下
2023-05-05
微信小程序判断手机号是否合法的实例代码
我们在微信小程序开发的时候,手机号的验证是经常需要操作的,那么如何验证手机号呢?这篇文章主要给大家介绍了关于微信小程序判断手机号是否合法的相关资料,需要的朋友可以参考下
2021-09-09
javascript实现的淘宝旅行通用日历组件用法实例
这篇文章主要介绍了javascript实现的淘宝旅行通用日历组件,以实例形式分析了该日历组件的相关设置及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
用js实现的一个根据内容自动生成表格的函数
用js实现的一个根据内容自动生成表格的函数...
2007-08-08
javascript实现打砖块小游戏(附完整源码)
这篇文章主要为大家详细介绍了javascript实现打砖块小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09