Comments (4)
textBaseline: 'bottom' 的时候 渐变色也不好用,有点摸不准这块了
from g.
升级到最新版的G,依然有问题
import { Circle, Canvas, Text, Group } from "@antv/g";
// import { Renderer } from "@antv/g-canvas";
import { Renderer } from "@antv/g-svg";
// import { Renderer } from "@antv/g-webgl";
/**
* canvas实现无法使用文字渐变色
*/
// create a canvas
const canvas = new Canvas({
container: document.getElementById("container"),
width: 800,
height: 600,
renderer: new Renderer(), // select a renderer
});
// create a circle
const circle = new Circle({
style: {
cx: 100,
cy: 100,
r: 50,
fill: "linear-gradient(90deg, green, red)",
stroke: "blue",
lineWidth: 5,
cursor: "pointer",
},
});
const text = new Text({
style: {
text: `两种渐变都有一个叫做 gradientUnits(渐变单元)的属性,它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值:userSpaceOnUse 、objectBoundingBox。默认值为 objectBoundingBox,我们目前看到的效果都是在这种系统下的,它大体上定义了对象的渐变大小范围,所以你只要指定从 0 到 1 的坐标值,渐变就会自动的缩放到对象相同大小。userSpaceOnUse 使用绝对单元,所以你必须知道对象的位置,并将渐变放在同样地位置上。在每个.shp,.shx与.dbf文件之中,图形在每个文件的排序是一致的。也就是说,.shp的第一条记录与.shx及.dbf之中的第一条记录相对应,如此类推。此外,在.shp与.shx之中,有许多字段的字节序是不一样的。因此用户在编写读取这些文件格式的程序时,必须十分小心地处理不同文件的不同字节序。`,
x: 0,
// dy: 0,
textBaseline: "top",
wordWrap: true,
wordWrapWidth: 800,
// fill: "linear-gradient(90deg, red 0%, green 100%)",
fill: "linear-gradient(90deg, green, red)",
// fill: "red",
fillOpacity: 1,
},
});
const g1 = new Group();
g1.append(text);
/**
* 此处渐变不好使
*/
const text2 = new Text({
style: {
text: `两种渐变都有一个叫做 gradientUnits(渐变单元)的属性,它描述了用来描述渐变的大小和方向的单元系统。该属性有两个值:userSpaceOnUse 、objectBoundingBox。默认值为 objectBoundingBox,我们目前看到的效果都是在这种系统下的,它大体上定义了对象的渐变大小范围,所以你只要指定从 0 到 1 的坐标值,渐变就会自动的缩放到对象相同大小。userSpaceOnUse 使用绝对单元,所以你必须知道对象的位置,并将渐变放在同样地位置上。在每个.shp,.shx与.dbf文件之中,图形在每个文件的排序是一致的。也就是说,.shp的第一条记录与.shx及.dbf之中的第一条记录相对应,如此类推。此外,在.shp与.shx之中,有许多字段的字节序是不一样的。因此用户在编写读取这些文件格式的程序时,必须十分小心地处理不同文件的不同字节序。`,
x: 0,
y: 250,
textBaseline: "top",
wordWrap: true,
wordWrapWidth: 800,
fill: "linear-gradient(90deg, green, red)",
// fill: 'red',
fillOpacity: 1,
},
});
console.log(text);
await canvas.ready;
// append to canvas
canvas.appendChild(circle);
canvas.appendChild(g1);
canvas.appendChild(text2);
from g.
正确效果如下:
from g.
升级到 @antv/[email protected] 和 @antv/[email protected] 即可,例子可以参考:https://github.com/antvis/G/blob/next/__tests__/demos/bugfix/1572.ts
from g.
Related Issues (20)
- [g]即使动画都停掉,requestAnimationFrame的调用不会停止 HOT 2
- [g-webgl] emoji 无法渲染
- 初始化加载的时候部分 Group 不展示 HOT 1
- [g] shadowRoot 事件监听无效 HOT 1
- [g] 运行动画后销毁画布 OOM
- [g] keyframe 中所有属性一致则不进行动画
- [g] Text 的 getComputedLength 返回 0
- i hope g-canvas can able to zoom in and out HOT 1
- (@antv/g) v6.0.2/@antv/(g-webgl)v2.0.1下绘制5000条path路径时比Line直线卡顿好几倍,甚至直接导致浏览器崩溃
- [g-webgl] 支持 WebXR HOT 1
- [g-webgl]画布相机镜头setZoom()设置到60以上时path和多边形边会变模糊失真严重 HOT 3
- [g-webgl]在相机镜头缩放到60下,Line/path/多边形边框lineWidth设置比1小时,宽度未变,但是元素颜色变透明了 HOT 3
- 使用 @antv/g-plugin-yoga,出现:Uncaught ReferenceError: _a is not defined at nbind.js:1146:62 HOT 1
- [g] supportsCSSTransform 导致 shadowRoot 下无法获取正确的偏移
- [g-svg] 存在冗余属性 marker-start 和 marker-end
- Update vulnerable packages HOT 2
- [g-svg] client2Viewport 返回 NaN
- 同 https://github.com/antvis/G/issues/1667
- HTML 容器 Camera 缩放
- Path不能显示 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from g.