网页资讯视频图片知道文库贴吧地图采购
进入贴吧全吧搜索
createjs吧 关注：126贴子：949
  • 8回复贴，共1页

CreateJS 存个档，我的自适应方法

只看楼主收藏回复

.
我创建了一个主容器，放入舞台，
后续的显示对象都放入这个容器
.
const exportRoot: createjs.Container = new createjs.Container()
stage.addChild(exportRoot)
.
横竖屏我是通过旋转容器实现的
写了一个 舞台 类来适配
.
import { anim_container, canvas, dom_overlay_container, exportRoot, stage } from "."
.
class Stage
{
static stageWidth: number
static stageHeight: number
static stageType: number
.
static width: number
static height: number
.
static makeResponsive(domContainers: Array<any>): void
{
const w: number = this.width
const h: number = this.height
const pRatio: number = window.devicePixelRatio || 1
const sRatio: number = 1
.
canvas.width = w * pRatio * sRatio
canvas.height = h * pRatio * sRatio
.
domContainers.forEach(function (container)
{
container.style.width = w * sRatio + 'px'
container.style.height = h * sRatio + 'px'
})
stage.scale = pRatio * sRatio
stage.isWebGL == true && stage.updateViewport(canvas.width, canvas.height)
stage.dispatchEvent("resize")
}
static init(): void
{
this.resizeCanvas = this.resizeCanvas.bind(this)
this.resizeCanvas()
window.addEventListener('resize', this.resizeCanvas)
}
static resizeCanvas(): void
{
this.width = document.documentElement.clientWidth
this.height = document.documentElement.clientHeight
.
if (this.width > this.height)
{
this.stageWidth = this.width
this.stageHeight = this.height
this.stageType = 1
exportRoot.rotation = 0
exportRoot.x = 0
}
else
{
this.stageWidth = this.height
this.stageHeight = this.width
this.stageType = 2
exportRoot.rotation = 90
exportRoot.x = this.width
}
this.makeResponsive([canvas, anim_container, dom_overlay_container])
}
}
export { Stage }
.
一开始要先调用舞台类的 init 方法
Stage.init()
.
每个 ui 界面的适配方法
stage.on("resize", this.resizeCanvas, this)
this.resizeCanvas()
.
static resizeCanvas(): void
{
const width: number = Stage.stageWidth / 800
const height: number = Stage.stageHeight / 600
let scale: number = 1
.
width > height ? scale = height : scale = width
.
this.node.scale = scale
this.node.x = Stage.stageWidth / 2
this.node.y = Stage.stageHeight / 2
}
.
这个 ui 界面 原始大小 800 x 600
注册点在中心位置所以是 Stage.stageWidth / 2 Stage.stageHeight / 2
.
IP属地:广东1楼2025-06-28 21:59回复
    .
    index.ts
    .
    const canvas: HTMLCanvasElement = document.getElementById("canvas") as HTMLCanvasElement
    const anim_container: HTMLDivElement = document.getElementById("animation_container") as HTMLDivElement
    const dom_overlay_container: HTMLDivElement = document.getElementById("dom_overlay_container") as HTMLDivElement
    .
    const stage: createjs.StageGL = new createjs.StageGL(canvas, { antialias: true })
    const exportRoot: createjs.Container = new createjs.Container()
    stage.addChild(exportRoot)
    .
    createjs.Ticker.framerate = 30;
    createjs.Ticker.timingMode = createjs.Ticker.RAF
    createjs.Ticker.addEventListener("tick", update)
    .
    function update(e: { paused: boolean, delta: number }): void
    {
    stage.update(e)
    console.log(createjs.Ticker.getMeasuredFPS().toFixed(2));
    }
    .
    Stage.init()
    Load.init()
    .
    IP属地:广东2楼2025-06-28 22:06
    回复
      2025-12-21 01:48:02
      广告
      不感兴趣
      开通SVIP免广告
      .
      处理资源的一个插件
      .
      plugins: [
      new CopyPlugin({
      patterns: [
      {
      from: path.resolve(__dirname, 'zoe'),
      to: 'zoe',
      globOptions: {
      ignore: ['**/*.fla', '**/*.swf'],
      include: ['**/*.png', '**/*.json']
      }
      },
      {
      from: path.resolve(__dirname, 'html5Animation'),
      to: path.resolve(__dirname, 'dist'),
      globOptions: {
      ignore: ['**/*.fla', '**/*.html'],
      include: ['**/*.png', '**/*.js']
      }
      },
      {
      from: path.resolve(__dirname, 'html'),
      to: path.resolve(__dirname, 'dist')
      },
      ]
      })
      ],
      .
      IP属地:广东3楼2025-06-28 22:08
      回复
        .
        打包配置
        .
        const path = require('path');
        const CopyPlugin = require('copy-webpack-plugin');
        .
        module.exports = {
        mode: 'development',//模式
        entry: './src/index.ts',//项目入口文件 文档类
        output: {
        filename: 'index.js',//打包后的文件名
        path: path.resolve(__dirname, 'dist'),//打包出来的文件存放目录
        },
        module: {
        rules: [
        {
        test: /\.tsx?$/,//正则表达式匹配.ts或.tsx文件
        use: 'ts-loader',//使用ts-loader处理TypeScript文件
        exclude: /node_modules/,//排除node_modules目录
        },
        ]
        },
        plugins: [
        new CopyPlugin({
        patterns: [
        {
        from: path.resolve(__dirname, 'zoe'),
        to: 'zoe',
        globOptions: {
        ignore: ['**/*.fla', '**/*.swf'],
        include: ['**/*.png', '**/*.json']
        }
        },
        {
        from: path.resolve(__dirname, 'html5Animation'),
        to: path.resolve(__dirname, 'dist'),
        globOptions: {
        ignore: ['**/*.fla', '**/*.html'],
        include: ['**/*.png', '**/*.js']
        }
        },
        {
        from: path.resolve(__dirname, 'html'),
        to: path.resolve(__dirname, 'dist')
        },
        ]
        })
        ],
        resolve: {
        extensions: ['.tsx', '.ts', '.js'],//自动解析的文件扩展名
        },
        devServer: {
        static: './dist',//告诉 dev server 从哪个目录提供内容
        open: true,//自动打开浏览器
        port: 8080,//设置服务器监听的端口
        hot: true,//启用模块热替换
        }
        };
        .
        IP属地:广东4楼2025-06-28 22:10
        回复
          .
          tsc
          .
          {
          "compilerOptions": {
          "target": "es5", // 指定编译目标的ECMAScript版本
          "module": "es2015", // 指定生成的模块系统
          "strict": true, // 启用所有严格类型检查选项
          "esModuleInterop": true, // 启用ES模块互操作
          "skipLibCheck": true, // 跳过对库文件的类型检查
          "outDir": "./dist", // 指定输出目录
          "rootDir": "./src", // 指定根目录，用于确定TypeScript输入文件的相对位置
          "removeComments": true, // 删除注释
          "noImplicitAny": false, // 禁用隐式any类型
          "sourceMap": true, // 生成相应的.map文件
          "experimentalDecorators": true, // 允许使用实验性的装饰器特性
          "emitDecoratorMetadata": true, // 为装饰器生成元数据
          "resolveJsonModule": true, // 关键配置：允许导入 JSON
          "allowJs": true, // 允许编译JavaScript文件（有用的话）
          "moduleResolution": "node", // 指定模块解析策略
          "allowSyntheticDefaultImports": true, // 允许从没有默认导出的模块中默认导入
          },
          "include": [
          "src/**/*" // 包含src目录下的所有文件
          ],
          "exclude": [
          "node_modules", // 排除node_modules目录
          "**/*.spec.ts" // 排除所有的测试文件
          ]
          }
          .
          IP属地:广东5楼2025-06-28 22:11
          回复
            .
            {
            "name": "an5",
            "version": "1.0.0",
            "main": "index.js",
            "scripts": {
            "build": "webpack"
            },
            "keywords": [],
            "author": "",
            "license": "ISC",
            "description": "",
            "dependencies": {
            "createjs-ts-ascainiao": "^1.0.10"
            },
            "devDependencies": {
            "copy-webpack-plugin": "^13.0.0",
            "ts-loader": "^9.5.2",
            "typescript": "^5.8.3",
            "webpack": "^5.99.9",
            "webpack-cli": "^6.0.1",
            "webpack-dev-server": "^5.2.2"
            }
            }
            .
            IP属地:广东6楼2025-06-28 22:13
            回复
              .
              html 模板
              .
              <!DOCTYPE html>
              <html lang="zh">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>an5</title>
              <script>
              window.addEventListener("focus", () =>
              {
              });
              window.addEventListener("blur", () =>
              {
              });
              window.addEventListener("contextmenu", (ev) =>
              {
              ev.preventDefault();
              });
              document.addEventListener("touchmove", (ev) =>
              {
              ev.preventDefault();
              }, { passive: false });
              document.addEventListener("touchstart", (ev) =>
              {
              ev.touches.length > 1 && ev.preventDefault();
              }, { passive: false });
              let lastTouchEnd = 0;
              document.addEventListener("touchend", (ev) =>
              {
              let now = Date.now();
              now - lastTouchEnd <= 300 && ev.preventDefault();
              lastTouchEnd = now;
              }, { passive: false });
              </script>
              <script src="./index.js" type="module"></script>
              </head>
              <body style="margin:0px;">
              <div id="animation_container" style="background-color:rgba(153, 153, 153, 1.00); width:960px; height:640px">
              <canvas id="canvas" width="960" height="640"
              style="position: absolute; display: block; background-color:rgba(153, 153, 153, 1.00);"></canvas>
              <div id="dom_overlay_container"
              style="pointer-events:none; overflow:hidden; width:960px; height:640px; position: absolute; left: 0px; top: 0px; display: block;">
              </div>
              </div>
              </body>
              </html>
              .
              IP属地:广东7楼2025-06-28 22:14
              回复
                加油支雅
                IP属地:浙江来自iPhone客户端8楼2025-07-02 12:54
                收起回复

                  扫二维码下载贴吧客户端

                  下载贴吧APP
                  看高清直播、视频！
                  • 8回复贴，共1页
                  发表回复
                  发贴请遵守贴吧协议及“七条底线”贴吧投诉
                  内  容:
                    查看全部
                  发 表
                  保存至快速回贴

                  发布成功
                  去贴吧APP订阅抽奖结果通知
                  扫码进入贴吧APP
                  ···········
                  开奖后第一时间站内信通知
                  ···········
                  中奖结果全员公示