antvis / g Goto Github PK
View Code? Open in Web Editor NEW💥 A flexible rendering engine for visualization.
Home Page: https://g.antv.antgroup.com/
💥 A flexible rendering engine for visualization.
Home Page: https://g.antv.antgroup.com/
shape.attr('cursor', 'move');
在鼠标离开 shape 时,cursor 没有及时变回 default
支持 R(0.5, 0.5, 0.1) 0:#ffffff 1:#1890ff
,相对画布计算渐变
目前更新clip形状后的效果是叠加而不是替换。正确效果是替换
现阶段看起来直接使用了一个打包好的文件、这样内部公共模块没办法统一处理
const canvas = new G.Canvas({
containerId: 'c1',
renderer: 'canvas',
width: 500,
height: 500
});
const path = canvas.addShape('path', {
attrs: {
path: [
[ 'M', 0, 0 ],
[ 'L', 50, 50 ]
]
}
});
expect(path.getPoint(0.5)).eql({
x: 25,
y: 25
});
path.attr('path', [
[ 'M', 0, 0 ],
[ 'L', 100, 100 ]
]);
expect(path.getPoint(0.5)).eql({
x: 50,
y: 50
});
attr 后 getPoint 结果没更新。
Related G2 issue#842 antvis/G2#842
具体请看示例:
https://codepen.io/ldc4/pen/MqbyQB?editors=1011
另外,求文档能够详细一点
g-3.1.2.min.js
Chrome 68.0.3440.106(正式版本) (64 位)
Mac 10.13.2 (17C88)
文本应该在上面
文本被矩形遮挡住了
05acf75#diff-6f0de38008ec4b414692f0933cda543eR117
这个 commit 变更后 svg 在动画下会造成不必要的重绘,例如下图中的 <g />
标签
import g from '@antv/g';
const Canvas = g.Canvas;
var canvas = new Canvas({
containerId: 'main',
renderer: 'svg',
width: 500,
height: 600
});
var group = canvas.addGroup();
var shape = group.addShape('circle', {
attrs: {
x: 100,
y: 100,
r: 50,
fill: 'red'
}
});
canvas.draw();
shape.animate({
x: 50,
y: 50,
}, 5000, 'easeLinear', () => { }, 1000);
@antv/[email protected] build-lib /Users/xxx/node_modules/_@[email protected]@@antv/g
babel src --out-dir lib
sh: babel: command not found
如题,我想在g6当中实践画一个长方形,然后加上border跟阴影,但加上去后发现阴影是加到了border上而非长方形上; 正确的behavior是将阴影加到长方形上才对,具体可参考这个测试例:
https://riddle.alibaba-inc.com/riddles/eb5f81df
错误的结果图:
预期的结果:(用纯canvas去画的情况)
https://codepen.io/d9767192/pen/EdoXEp
与有田讨论觉得可以区分 fillShadow 和 strokeShadow
再麻烦青湳老师帮忙看看
能添加.d.ts支持吗
官网给的一个例子中, 饼图中的环图显示,数字为0的在图上有显示颜色, 为1的反倒没有
antv官方网址第三个,饼图的第三个环图
https://antv.alipay.com/zh-cn/g2/3.x/demo/pie/pie-slice.html
数字为1的红色能出现在饼图中
数字0的在并图中有显示, 数字为1的反而没有
将data设置为 var data = [{
type: '分类一',
value: 52
}, {
type: '分类二',
value: 17
}, {
type: '分类三',
value: 30
}, {
type: '分类四',
value: 0
}, {
type: 'Other',
value: 1
}]; 点击运行
RT,parsePath
解析 M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z
这样一个 SVG path 字符串,和 SVG 本身绘制结果不一样;
在这段字符串中,解析会有两个问题:
L 的连写:L194 150.2 47.9 171.5
应该解析为 ["L", 194, 150.2],["L", 47.9, 171.5]
, 而不是 ["L", 194, 150.2, 47.9, 171.5]
没有空格间隔的负数:l-25-145.5 105.7-103
应该解析为 ["l", -25, -145.5], ["l", 105.7, -103]
而不是 ["l", "-25-145.5", "105.7-103"]
这段字符串在 svg 中支持 demo
need effective element.clone()
So far, there are many problems to clone element in this way. Such as :
strokeStyle
.// 注册一个实心箭头
G.registerArrow('solid', {
// 以线上点作为自身坐标系原点的一段 path 。
// 参数可以是 path 字符串、数组;也可以是回调函数(参数是线宽或者线对象本身)
path: '',
stroke: '', // 描边色
fill: '', // 填充色
offset: 10 // 正数,往终点方向偏移,负数,往起点方向偏移
});
new G.Line({
attrs: {
endArrow: 'solid', // 实心箭头
startArrow: 'hollow' // 空心箭头
}
});
感觉这样就差不多够用了,斧正一下 @dxq613 @leungwensen @elaine1234
使用G6的时候发现,矩形的radius仅支持一个数值,不支持数组。
group.addShape('rect',{
attrs:{
...
radius: 3, // Array is not allowed
}
})
是否能与G绘图接口Shape API保持一致;包括参数值支持的类型以及参数名。
new G.Shape.Rect({
attrs: {
x: 50, // 矩形左上角 x 坐标
y: 50, // 矩形左上角 y 坐标
height: 20, // 矩形高度
width: 80, // 矩形宽度
lineWidth: 1, // html5 canvas 绘图属性
fill: '#1890FF', // html5 canvas 绘图属性
strokeStyle: '#000' // html5 canvas 绘图属性
radius: 0 // 圆角的设置,可以是数值或者数组格式,支持为四个夹角分别设置,用法同 padding
}
})
const canvas = new Canvas({
containerId: 'c1',
renderer: 'canvas',
width: 500,
height: 500,
pixelRatio: 1
});
const circle = canvas.addShape('circle', {
attrs: {
x: 100,
y: 100,
r: 10,
fill: 'red'
}
});
circle.animate({
transform: [
[ 't', 50, 0 ]
]
}, 2000);
circle.animate({
transform: [
[ 't', 0, 50 ]
]
}, 2000);
$ git clone [email protected]:antvis/g.git
$ npm install
$ npm run dev
想在本地跑起来,运行demo可以么?
方便的话给出简要步骤
问题参考 g6下提出的issue
Firefox 65.0.2 - windows
文字按设置的baseline呈现
baseline在firefox下不生效
@AntV\g\src\renderers\svg\painter.js l561
el.setAttribute('alignment-baseline', BASELINE_MAP[attrs.textBaseline] || 'baseline');
这里的alignment-baseline Firefox不支持,需要增加dominant-baseline属性,注意MAP的值也不一致,比如alignment-baseline="before-edge" 对应dominant-baseline="text-before-edge"
text = new Text({
attrs: {
text: 'sdfj\ndfsjdh'
}
});
console.log(text.attr('textArr')); // [ 'sdfj', 'dfsjdh' ]
// 重新设置 text 属性
text.attr('text', '1234')
// textArr 属性仍然存在,正常情况下应该清空
console.log(text.attr('textArr')); // [ 'sdfj', 'dfsjdh' ]
另外 textArr 这个属性或许放在 text._attrs 下更好,而不是现在的 text._attrs.attrs.
在path为空时应该同group一样,全部为0
在 shape 中的 __setAttrImg 方法中,如果传入 url,需要在 new Image 之后设置跨域属性
if (Util.isString(img)) {
const image = new Image();
image.onload = function() {
if (self.get('destroyed')) return false;
self.attr('imgSrc', img);
self.attr('img', image);
const callback = self.get('callback');
if (callback) {
callback.call(self);
}
self.set('loading', false);
};
image.src = img;
// 需要在此处添加
image.crossOrigin = 'Anonymous'
self.set('loading', true);
}
支持了跨域图片之后,后续通过画布导出图片时,就不会遇到 canvas 污染的问题,否则在 canvas.toDataURL 时,会检测到有跨域图片从而报错
A canvas library which providing 2d draw for G2 & G6.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.