import React from 'react';
import EffectImages from './demos/01-effect-images';
import Principle from './demos/02-principle';
import { Quote, Message, Divide } from 'docs/components';

const Demonstration = () => {
  return (
    <section>
      <Divide id="demonstration" title="功能演示" />
      <Message.left>
        你听说过<Quote>Canvas 2D贴图</Quote>吗？
      </Message.left>
      <Message.right>没有呢。它能做什么呢？</Message.right>
      <Message.left>
        不知道你有没有在<Quote>Canvas 2D</Quote>中看过图像的类似<Quote>3D</Quote>的<Quote>扭曲变形</Quote>
        效果，这些就可以通过<Quote>Canvas 2D 贴图技术</Quote>实现，像下面这些：
        <EffectImages />
      </Message.left>
      <Message.right>
        哇🤩，这效果太棒了，但据我所知，<Quote>Canvas</Quote>
        的变换<Quote>Transform</Quote>并不能直接实现这些呢，它是怎么实现的呢？
      </Message.right>
      <Message.left>
        在<Quote link="https://threejs.org/">ThreeJS</Quote>
        中，大多数3D模型都是由三角形图元组成的，而这也是实现<Quote>Canvas 2D贴图</Quote>
        的技术关键。我们可以通过将2D图像分割为多个三角形图元并为每个图元单独执行变换
        操作，最后整体就能呈现出扭曲变形的效果，拿图像倾斜作为例子：
        <Principle />
      </Message.left>
      <Message.left>
        当然也许你对实现细节并不太关心，所以我已经为你准备了一个能快速实现这些效果的工具库，我给它起名为
        <Quote>fabric-texture</Quote>。
      </Message.left>
      <Message.right>哇！我已经迫不及待想了解了！</Message.right>
    </section>
  );
};

export default Demonstration;