React / Ant Design Pro 实现Canvas画布实时自适应

如何实现canvas根据父容器进行自适应？

Ant Design的组件都提供了强大的自适应能力，为了对齐父组件，镶嵌在Ant Design组件里的canvas也需要能根据父级容器进行自适应的能力，页面高度一般不用做自适应，因为即使太多内容页面太长，也会出现滚动条，所以问题不大，问题在于宽度，屏幕尺寸各不同，如果宽度不够，元素就会被挤变形或者换行

步骤：

首先，固定canvas的height，对于width

1、实时获取父组件的尺寸

2、实时修改canvas的尺寸

 

1

 这里使用一个npm的包，可以很轻松的实时获取某节点的尺寸：

npm install resize-observer-polyfill --save-dev

 

用法 ：首先在父节点下创建一个div，父节点，div，canvas的关系如下：

<父组件>
    <div>
        <Canvas></