import React from 'react';
import QuickStartDemo from './demos/01-quick-start';
import InteractiveCanvas from './demos/02-Interactive-canvas';
import { Code, Divide, Message, Quote } from 'docs/components';
import styles from './style.less';

const QuickStart = () => {
  return (
    <section>
      <Divide id="quick-start" title="快速开始" />
      <Message.left long>
        要使用这个工具库，你可以通过以下命令安装它
        <Code className={styles.code} language="vim" link="sections/quick-start/codes/install.sh" />
      </Message.left>
      <Message.left>
        你可以从该库中拿出它的核心类<Quote>Texture</Quote>，通过它你能为一个图像源
        <Quote>(HTMLImageElement，HTMLCanvasElement)</Quote>
        施加变形操作，并最后产出一个含变形后图像的新画布对象，代码如下（你可以与代码中的按钮和输入框进行交互，感受变形效果）：
        <QuickStartDemo />
      </Message.left>
      <Message.right>
        哇这确实让人感到惊叹~不过我感觉我们很难仅通过调用其内部提供的方法去实现一个满意的变形效果。
      </Message.right>
      <Message.left>
        我非常清楚你的忧虑，如果能通过可视化的方式进行图像扭曲那这个问题就会迎刃而解，对此，我结合
        <Quote>Fabric.js</Quote>开发了对应的工具类~ 你可以与下面的示例中的控件进行交互以感受它的风采:
        <InteractiveCanvas />
      </Message.left>
      <Message.left long>
        <Quote>FabricTexture</Quote>
        类是这个交互功能实现的核心类，使用它便可以快速构建可交互变形的“贴图”。
      </Message.left>
      <Message.right>
        <span className={styles.amazing}>
          简直amazing啊！感谢你为我分享这么棒的工具！你的<Quote>Github</Quote>将赢得我的一颗⭐️！
        </span>
      </Message.right>
      <Message.left>
        哈哈，非常感谢你的支持！如果能在实际业务中帮助到你那就更让我感到荣幸了！
      </Message.left>
    </section>
  );
};

export default QuickStart;