import React from 'react';
import Message from 'docs/components/message';
import Divide from 'docs/components/divide';
import ChangeRenderOptions from './demos/01-change-render-options';
import ChangeSplitUnit from './demos/02-change-split-unit';
import ChangeRenderMethod from './demos/03-change-render-method';
import LimitTextureInputSize from './demos/04-limit-texture-input-size';
import LimitTextureOutputSize from './demos/05-limit-texture-output-size';
import UseWorker from './demos/06-use-worker';
import { Quote } from 'docs/components';

const MoreConfiguration = () => {
  return (
    <section>
      <Divide id="more-configuration" title="更多配置" />
      <Message.left>如果你不急着使用，是否愿意再听我为你介绍一下其他的配置呢？</Message.left>
      <Message.right>十分期待！</Message.right>
      <Message.left>
        如果你想查看三角形图元的分割情况，你可以设置是否在变形的贴图上显示分割线、分割点，当然你也可以将贴图隐藏只显示分割线或分割点以从不同的视图观察变形效果：
        <ChangeRenderOptions />
      </Message.left>
      <Message.right>
        点赞，这功能对于效果调试也是非常实用的呢~对了，我能控制这个分割的数量吗？
      </Message.right>
      <Message.left>
        当然！你可以通过以下方法设置分割的三角形图元大小比例（如0.1时单个三角形图元最大宽高为图像原始宽度的10%），分割比例越小分割数量越多，变形的图像也会越精细。
        <ChangeSplitUnit />
      </Message.left>
      <Message.right>
        看起来非常棒👍🏻但是如果设置分割比例太小会不会让图像合成变得非常卡顿呢？
      </Message.right>
      <Message.left>
        是的，这是避不开的问题，所以在业务实现时你需要在精细度和效率之间做衡量，不过我也有为性能提升这方面作出努力，默认配置下会使用
        <Quote>WebGL</Quote>绘制来加快变形图像的绘制，但如果浏览器不支持<Quote>WebGL</Quote>
        默认将自动退级使用<Quote>Canvas 2D</Quote>绘制。
      </Message.left>
      <Message.left>
        不过当然也允许你自行配置使用何种方法绘制，以及是否开启抗锯齿效果（默认开启），但你要注意的是，不同的绘制的方法绘制的效果也是不一样的，两者相比，
        <Quote>WebGL</Quote>绘制更快，但<Quote>Canvas 2D</Quote>
        绘制小图时内部图案更精细（但当前Canvas2D绘制的算法下存在边缘毛躁问题😥）：
        <ChangeRenderMethod />
      </Message.left>
      <Message.left>
        应用大图的情况下两者的最后效果差异不大，更建议使用<Quote>WebGL</Quote>加快绘制速度。
      </Message.left>
      <Message.right>记住了！对了，那我应用大图的话，那是不是会特别卡顿？</Message.right>
      <Message.left>
        我当然是有考虑到应用大图时的性能问题，也许你会想，能不能在交互变形的时候使用压缩图像改善交互体验，然后在结束交互后重新使用原图像变形，这是很自然会想到的优化方式，所以我在实现
        <Quote>FabricTexture</Quote>时，内部默认会使用压缩图（压缩宽高到<Quote>2000px</Quote>
        内）进行变形。如果你想自己控制这个压缩数值，你可以这么做：
        <LimitTextureInputSize />
      </Message.left>
      <Message.left>
        既然都可以限制输入图尺寸，那当然同样也可以限制输出图尺寸：
        <LimitTextureOutputSize />
      </Message.left>
      <Message.left>
        但稍有不同的是，输出图默认没有做尺寸限制，如果你在交互变形的时候突然发现图像消失变透明了，请不要慌张，那是因为图像变形的尺寸超出浏览器画布尺寸限制了，导致无法成功合成，这时候你就有必要限制一下输出图尺寸了。
      </Message.left>
      <Message.left>
        除了上面的设置，如果你担心过多的分隔会阻塞页面导致卡顿，你可以将变形的操作放在<Quote>Web Worker</Quote>中执行，但是要注意的是这将变为异步操作，代码如下：
        <UseWorker />
      </Message.left>
      <Message.right>
        你考虑的简直太周到了，这些配置相信会给我往后的使用中带来非常大的帮助！
      </Message.right>
      <Message.left>非常感谢你的肯定~</Message.left>
    </section>
  );
};

export default MoreConfiguration;