README

想根据 Impress.js 创建精彩的演示文稿吗？

使用 EasyImpressBundle，您可以通过单个 yml 配置文件创建演示文稿。

查看在线演示

需求

• PHP 5.5+ / 7.0+
• Composer

安装

• 安装包

  $ composer require orbitale/easyimpress-bundle

• 将其添加到您的 Kernel 中

  <?php
  class AppKernel extends Kernel
  {
      public function registerBundles()
      {
          $bundles = [
              // ...
              new Orbitale\Bundle\EasyImpressBundle\EasyImpressBundle(),
          ];
      }
  }

• 添加路由说明

  # app/config/routing.yml
  easy_impress:
      resource: '@EasyImpressBundle/Resources/config/routing.yml'
      prefix: /presentations    # not mandatory, but very useful

• 安装必要的资源

  $ php bin/console assets:install --symlink --relative 

• 在您的 %kernel.root_dir%/config/presentations/ 目录中开始创建演示文稿！

使用方法

默认情况下，每个滑块都包含在 app/config/presentations 目录中，文件名用作滑块的标识符。这个标识符将是显示在 URL 中的名称。

👉 小贴士：您可以通过更改 EasyImpress 的配置来覆盖此目录，下面查看。

app/Resource/presentations/{presentation_name} 将可通过 /{presentation_name} 路径访问。

配置和 yaml 文件处理

每个文件都将作为资源添加到容器中，因此如果在开发中修改，缓存将自动刷新。

Yml 文件由 Symfony Finder 在 PresentationsPass 中找到。

演示文稿和幻灯片配置通过 Symfony Config 组件处理，您可以在 Configuration 目录中查看配置类和参考。

检索演示文稿

您可以通过 easy_impress 服务获取所有演示文稿，它们将在运行时从数组转换为不可变对象。

Yml 参考

由于每个演示文稿都是用 yml 格式制作的，因此这里提供了具有默认值的参考

# Html "data-" attributes that correspond to Impress options
data:
    transition-duration: 1000
    min-scale: 1

# Determines the css "opacity" for inactive slides (".future" or ".past" slide classes)
inactive_opacity: 1

# Some HTML attributes for the presentation
# Please note that "impress_slides_container" class is mandatory and always added
attr:
    style: ''
    class: 'impress_slides_container'

# With increments, the slides coordinates will automatically be calculated based on these values
# For example, if "x" increment is set to 100, each slide "x" value will be incremented with 100.
# Increments will also correspond to base values for the first slide.
# IMPORTANT: If you set increments for one property, you CANNOT set the property in a slide.
increments:
    x:        ~
    y:        ~
    z:        ~
    rotate:   ~
    rotate-x: ~
    rotate-y: ~
    rotate-z: ~

# Here you will define all slides
# Slides are an array of properties
slides:

    # Slide ID will be processed automatically with this as default value:
    # {presentation_name}_{slide_number}
    #
    # But you can specify an id manually:
    #
    # slides:
    #     slide_id:
    #         data:
    #             x: 1
    #
    # You can specify no id at all:
    #
    # slides:
    #     - data:
    #           x: 1
    #
    # Or add it as a simple property (make sure there is no duplicate):
    #
    # slides:
    #     - id: slide_id
    #       data:
    #           x: 1
    #

    slide id or hyphen:

        # Optional, see id informations above
        id: ''

        # Slide's content, in plain HTML
        content: ''

        # HTML data attributes that correspond to slide's position/rotation in the canvas
        # All of these will correspond to CSS transforms
        data:
            x:        ~
            y:        ~
            z:        ~
            rotate:   ~ # Alias to "rotate-z"
            rotate-x: ~
            rotate-y: ~
            rotate-z: ~
            scale:    ~ # 

        # Some HTML attributes for the slide
        # Please note that "step" class is mandatory and always added
        attr:
            style: ''
            class: 'step'

        # If you are using "increments" in presentation,
        #   you can reset any incrementation value starting from this slide
        #   by setting the attribute to "true".
        # The slide that resets value will recover the base increment value
        #   and incrementation will continue for the next slides.
        reset:
            x:        false
            y:        false
            z:        false
            rotate:   false
            rotate-x: false
            rotate-y: false
            rotate-z: false

数据属性

如 ImpressJS Wiki 中所述

笛卡尔位置

在笛卡尔空间中定位步骤框架的位置。

data-x, data-y, data-z

定义 3D 笛卡尔空间中的起点位置。以像素为单位指定。

data-rotate

绕 X-Y 平面中的原点旋转步骤框架。这类似于在面部前旋转一张纸，同时保持其与图像平面的正交性（这个解释有帮助吗？我不这么认为...）。它以类似照片查看器旋转的方式旋转，就像从纵向视图切换到横向视图一样。

极坐标位置

绕 theta（方位角）和 phi（仰角）轴旋转步骤框架的原点。这种效果类似于将框架倾斜离开你（仰角）或将其放置在转盘上——然后旋转转盘（方位角）。

data-rotate-x

沿 theta（方位角）轴旋转

data-rotate-y

沿 phi（仰角）轴旋转

大小

data-scale

步骤框架“正常”大小的倍数。没有绝对视觉影响，但用于创建框架之间的相对大小差异。实际上，它控制相机相对于步骤框架的“距离”。

更多信息可以在 Impress.js Wiki 或 Impress.js 文档 中找到。

配置参考

easy_impress:
    presentations_dir: '%kernel.root_dir/config/presentations'
    layout:            '@EasyImpress/layout.html.twig'

许可协议

此软件包采用MIT许可协议，任何贡献都应在此许可协议下进行。