feat: add Ruler plugin and canvas:changesize event #5218
Conversation
|
Hi~, 这个插件看起来很棒，有兴趣后面将它放进 G6 5.0 中吗 |
| @@ -501,6 +501,7 @@ export default class ViewController { | |||
| plugin.positionInit(); | |||
| } | |||
| }); | |||
| graph.emit('canvas:changeSize', { width, height }); | |||
There was a problem hiding this comment.
g6 中抛出的事件名通常是以全小写的形式，你可以改为 canvas:changesize 来和已有事件名保持一致
|
|
||
| private lineHeight: number = 10 | ||
|
|
||
| private unitInterval: number = 10 |
There was a problem hiding this comment.
一个比较好的注释方式是使用 /** */ 来进行注释，这样编辑器可以自动识别提示，例如：
/** canvas width */
public width: number = 0;| this.drawPointsAndLine() | ||
| } | ||
|
|
||
|
|
|
|
||
| private drawPointsAndLine() { | ||
| const ruleCanvas = this.canvas | ||
| const unitInterval = Math.round(this.unitInterval / this.scale) |
There was a problem hiding this comment.
使用原生 canvas 来绘制标尺通常能够获得更好的绘制和交互性能，不过在缩放 / 拖拽过程中需要考虑标尺画布和 G6 画布之间的同步。对于缩放交互，这个 PR 已经考虑到了，不过拖拽画布的交互可能需要进一步考虑一下。
另外，如果后面有兴趣将这个插件为 G6 5.0 提 PR 的话，使用 G6 5.0 提供的绘制API进行绘制能够获得跨渲染引擎的绘制能力。
There was a problem hiding this comment.
使用原生 canvas 来绘制标尺通常能够获得更好的绘制和交互性能，不过在缩放 / 拖拽过程中需要考虑标尺画布和 G6 画布之间的同步。对于缩放交互，这个 PR 已经考虑到了，不过拖拽画布的交互可能需要进一步考虑一下。 另外，如果后面有兴趣将这个插件为 G6 5.0 提 PR 的话，使用 G6 5.0 提供的绘制API进行绘制能够获得跨渲染引擎的绘制能力。
我晚点在追加一下拖放的, 挺多东西要考虑的
There was a problem hiding this comment.
@Aarebecca 我更新了, 你看看需要改什么, 我英语不好, 有些命名感觉不好, 特别是 配置和方法名 需要变动不?
Aarebecca
changed the title
| font: CanvasRenderingContext2D['font'] | ||
| } | ||
|
|
||
| export interface RulerConf { |
|
|
||
| private lineHeight: number = 10 | ||
|
|
||
| private unitInterval: number = 10 |
There was a problem hiding this comment.
一个比较好的注释方式是使用 /** */ 来进行注释，这样编辑器可以自动识别提示，例如：
/** canvas width */
public width: number = 0;| height: number; | ||
| scale: number; | ||
| unitInterval: number; | ||
| showUnitLabel: boolean; |
There was a problem hiding this comment.
unitLabel 这里表示的是刻度值吗？如果是的话翻译成 tickLabel 会更好些
| @@ -0,0 +1,163 @@ | |||
| export enum ruleDirection { HORIZONTAL = 'horizontal', VERTICAL = 'vertical' } | |||
|
|
|||
| export interface pointConfig { | |||
There was a problem hiding this comment.
interface 或者 type 通常以首字母大写的驼峰形式，这里应为 PointConfig
| @@ -0,0 +1,163 @@ | |||
| export enum ruleDirection { HORIZONTAL = 'horizontal', VERTICAL = 'vertical' } | |||
|
另外，麻烦在 PR 里面贴一个演示视频或者截图呢 ❤️ |
我本地打开的site, 无法显示图表示例 |
@Aarebecca 我更新一个gif图片, 但是示例我无法编写, 空白 |
@zmcode 这个 PR 先不处理了，建议来加到 G6 5.0 中 👍🏻 |
|
这是来自QQ邮箱的假期自动回复邮件。
你好，我最近正在休假中，无法亲自回复你的邮件。我将在假期结束后，尽快给你回复。
|
增加标尺插件, 添加canvas:changesize事件
