antv g6 中shape为image时，怎么设置img属性为本地图片啊
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了antv g6 中shape为image时，怎么设置img属性为本地图片啊相关的知识，希望对你有一定的参考价值。
antv g6 中shape为image时，怎么设置img属性为本地图片啊，如图不行
<html>
<head>
<meta charset="utf-8">
<title>词云</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://a.alipayobjects.com/g/datavis/g2/2.3.2/g2.js"></script>
</head>
<body>
<div id="c1"></div>
<script src="https://a.alipayobjects.com/g/datavis/g-cloud/1.0.2/index.js"></script>
<script>
var Util = G2.Util;
var Shape = G2.Shape;
function getTextAttrs(cfg)
var textAttrs = Util.mix(true, ,
fillOpacity: cfg.opacity,
fontSize: cfg.size,
rotate: cfg.origin._origin.rotate,
text: cfg.origin._origin.text,
textAlign: 'center',
fill: cfg.color,
textBaseline:'Alphabetic'
, cfg.style);
return textAttrs;
// 给point注册一个词云的shape
Shape.registShape('point', 'cloud',
drawShape: function(cfg, container)
cfg.points = this.parsePoints(cfg.points);
var attrs = getTextAttrs(cfg);
// 给容器添加text类型的shape
// 坐标仍然是原来的坐标
// 文字样式为通过getTextAttrs方法获取的样式
var shape = container.addShape('text',
attrs: Util.mix(attrs,
x: cfg.points[0].x,
y: cfg.points[0].y
)
);
return shape;
);
//json数据的地址：https://antv.alipay.com/static/data/g2pv.json
$.getJSON('./g2pv.json', function(data)
data.sort(function(a,b)
return b.pv-a.pv;
);
// 获取数据的最大值和最小值
var max = data[0].pv;
var min = data[data.length-1].pv;
// 构造一个词云布局对象
var imageCloud = new Cloud(
// 传入数据源
words: data,
// 设定宽高（默认为500*500）
width: 650,
height: 450,
// 设定文字大小配置函数(默认为12-40px的随机大小)
size: function(words)
// 将pv映射到canvas可绘制的size范围14-100(canvas默认最小文字为12px)
return ((words.pv - min)/(max - min)) * (100 - 14) + 14;
,
// 设定文字内容
text: function(words)
// 将网址处理成用'.'分隔开的第一个字符串
var index = words.site.indexOf('.');
var text = words.site;
if(index > 0 && index < words.site.length)
text = words.site.substr(0,index);
// 当字符串是'www'时获取下一个
if(text === 'www')
text = words.site.substr(index + 1);
index = text.indexOf('.');
text = text.substr(0,index);
// 当字符串是数字时获取整个网址
if(/^[0-9]*$/g.test(text))
text = words.site;
return text;
);
//图片地址
imageCloud.image("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1185508753,3294372198&fm=23&gp=0.jpg",function(Cloud)
Cloud.exec(function(texts)
var chart = new G2.Chart(
id : 'c1',
// canvas的宽高需要和布局宽高一致
width: 850,
height: 600,
plotCfg :
margin : 0
);
chart.legend(false);
chart.source(texts);
chart.axis(false);
chart.tooltip(
title:false
);
// 将词云坐标系调整为G2的坐标系
chart.coord().reflect();
// 绘制点图，在x*y的坐标点绘制自定义的词云shape，颜色根据text字段进行映射，大小根据size字段的真实值进行映射，文字样式配置为词云布局返回的样式，tooltip显示site*pv两个字段的内容
chart.point().position('x*y').color('text').size('size',function(size)
return size;
).shape('cloud').style(
fontStyle: texts[0].style,
fontFamily: texts[0].font,
fontWeight: texts[0].weight
).tooltip('site*pv');
chart.render();
);
);
);
</script>
</body>
</html>
--------------------- 参考技术A img: require('xxx'),里面填图片路径即可。
在vb中人如何用 shape控件画圆?
1、打开VB软件，新建一个标准EXE。
2、建立一个标签按钮。
3、可以改变标签的文字大小类型位置，在右边找到Font属性。我们将字体设为黑体，字形设为粗行，大小改为18。
4、在caption属性的窗口中可以改标签的内容，例如改为"又下雨了"
5、我们还可以改动标签文字的位置，例如左边，中间，还是在右边输出。在Alignment中选择0,1,2。
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval"
android:useLevel="false">
<solid android:color="@color/red"/>
<stroke
android:width="1dp"
android:color="@color/white"/>
<size android:width="20dp"
android:height="20dp"/>
</shape>
扩展资料
很多软件中也用图形来丰富用户数据.例如在有名的Word,Excel或者表格控件 比如Spread中经常见到Shape图形,用户可以在一个表单中，可以创建一个星形或者其他图像，用来突出显示数据或者或给用 户指示一些工作表的特定方面。
接下来可以自定义此星形或者图像的尺寸，背景色，旋转角度或者渐变效果等方面。下面是以Spread为例子,给出自定义图形的编程示例:
// 添加一个箭头图形，并设置边框以及背景颜色。
Win.Spread.DrawingSpace.ArrowShape arrow = new FarPoint.Win.Spread.DrawingSpace.ArrowShape();
BackColor = Color.Plum;
ForeColor = Color.Pink;
SetBounds(0,0,200,100);
fpSpread1.ActiveSheet.AddShape(arrow);
参考资料来源：百度百科-Shape控件
参考技术B 先在做窗口中单击鼠标右键选择’添加选项卡‘命令，在命令框中输入‘shape’，这样在工具栏中添加shape控件：然后再设置 shape控件的shape属性值为3-circle ，点击shape，就可以随便画圆了，学习语言一定要敢于大胆尝试，对不同属性，大胆修改看窗体与控件变化，你才能真正学会！！光看理论书是不够的，但却是必须的！！！！ 参考技术C 设置 shape控件的shape属性值为circle本回答被提问者采纳以上是关于antv g6 中shape为image时，怎么设置img属性为本地图片啊的主要内容，如果未能解决你的问题，请参考以下文章