Animate CC Canvas 导出嵌入角度模板
Posted
技术标签:
【中文标题】Animate CC Canvas 导出嵌入角度模板【英文标题】:Animate CC Canvas Export embed in angular template 【发布时间】:2019-01-20 21:05:13 【问题描述】:所以我想带一个我在 animate cc 中完成的小动画,并将其嵌入到画布上的角度模板中,如下所示:
<div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1014px; height:650px">
<canvas id="canvas" style="position: absolute; display: block; background-color:rgba(255, 255, 255, 1.00);"></canvas>
<div id="dom_overlay_container" style="pointer-events:none; overflow:hidden; width:1014px; height:650px; position: absolute; left: 0px; top: 0px; display: block;">
</div>
</div>
我在 component.ts 中引用了由 animate cc 生成的 javascript,但是当我尝试编译应用程序时出现一些错误
1) 未捕获的类型错误:createjs.Rectangle 不是构造函数(即使我安装了 createjs)import * as createjs from 'createjs-module';
console.log("Entered BallAnim script");
var createjs, AdobeAn;
(function (cjs, an)
var p; // shortcut to reference prototypes
var lib = ;
var ss = ;
var img = ;
lib.ssMetadata = [];
console.log("Entered BallAnim Init");
// symbols:
// helper functions:
function mc_symbol_clone()
var clone = this._cloneProps(new this.constructor(this.mode, this.startPosition, this.loop));
clone.gotoAndStop(this.currentFrame);
clone.paused = this.paused;
clone.framerate = this.framerate;
return clone;
function getMCSymbolPrototype(symbol, nominalBounds, frameBounds)
var prototype = cjs.extend(symbol, cjs.MovieClip);
prototype.clone = mc_symbol_clone;
prototype.nominalBounds = nominalBounds;
prototype.frameBounds = frameBounds
console.log("Were we able to return any prototype: " + prototype);
return prototype;
(lib.Ball = function (mode, startPosition, loop)
this.initialize(mode, startPosition, loop, );
// Layer_1
this.shape = new cjs.Shape();
this.shape.graphics.f("#FF0000").s().p("AvZOnQmXmDgBokQABojGXmDQGZmEJAAAQJBAAGYGEQGZGDAAIjQAAIkmZGDQmYGEpBAAQpAAAmZmEg");
this.shape.setTransform(139.4, 132.3);
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1));
).prototype = getMCSymbolPrototype(lib.Ball, new createjs.Rectangle(0, 0, 278.7, 264.6), null); //ORG
// stage content:
(lib.Untitled1 = function (mode, startPosition, loop)
this.initialize(mode, startPosition, loop, );
// timeline functions:
this.frame_300 = function ()
/*
Stop a Movie Clip/Video
Stops the specified movie clip or video.
*/
_this.stop();
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).wait(300).call(this.frame_300).wait(1));
// Layer_1
this.instance = new lib.Ball();
this.instance.parent = this;
this.instance.setTransform(-97.3, 114.2, 0.718, 0.756, 0, 0, 0, 139.3, 132.3);
this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to( x: -89.3, y: 129.2 , 0).wait(1).to( x: -81.4, y: 144.2 , 0).wait(1).to( x: -73.4, y: 159.2 , 0).wait(1).to( x: -65.5, y: 174.2 , 0).wait(1).to( x: -57.5, y: 189.2 , 0).wait(1).to( x: -49.6, y: 204.2 , 0).wait(1).to( x: -41.6, y: 219.2 , 0).wait(1).to( x: -33.7, y: 234.3 , 0).wait(1).to( x: -25.7, y: 249.3 , 0).wait(1).to( x: -17.8, y: 264.3 , 0).wait(1).to( x: -9.9, y: 279.3 , 0).wait(1).to( x: -1.9, y: 294.3 , 0).wait(1).to( x: 6, y: 309.3 , 0).wait(1).to( x: 14, y: 324.3 , 0).wait(1).to( x: 21.9, y: 339.4 , 0).wait(1).to( x: 29.9, y: 354.4 , 0).wait(1).to( x: 37.8, y: 369.4 , 0).wait(1).to( x: 45.8, y: 384.4 , 0).wait(1).to( x: 53.7, y: 399.4 , 0).wait(1).to( x: 61.6, y: 414.4 , 0).wait(1).to( x: 69.6, y: 429.4 , 0).wait(1).to( x: 77.5, y: 444.5 , 0).wait(1).to( x: 85.5, y: 459.5 , 0).wait(1).to( x: 93.4, y: 474.5 , 0).wait(1).to( x: 101.3, y: 489.5 , 0).wait(1).to( x: 109.3, y: 504.5 , 0).wait(1).to( x: 117.2, y: 519.5 , 0).wait(1).to( x: 125.2, y: 534.5 , 0).wait(1).to( x: 133.1, y: 549.5 , 0).wait(1).to( x: 141.6, y: 538.5 , 0).wait(1).to( x: 150, y: 527.5 , 0).wait(1).to( x: 158.5, y: 516.5 , 0).wait(1).to( x: 166.9, y: 505.5 , 0).wait(1).to( x: 175.4, y: 494.5 , 0).wait(1).to( x: 183.8, y: 483.5 , 0).wait(1).to( x: 192.3, y: 472.5 , 0).wait(1).to( x: 200.7, y: 461.5 , 0).wait(1).to( x: 209.2, y: 450.5 , 0).wait(1).to( x: 217.6, y: 439.4 , 0).wait(1).to( x: 226.1, y: 428.4 , 0).wait(1).to( x: 234.5, y: 417.4 , 0).wait(1).to( x: 243, y: 406.4 , 0).wait(1).to( x: 251.4, y: 395.4 , 0).wait(1).to( x: 259.9, y: 384.4 , 0).wait(1).to( x: 268.3, y: 373.4 , 0).wait(1).to( x: 276.8, y: 362.4 , 0).wait(1).to( x: 285.2, y: 351.4 , 0).wait(1).to( x: 293.7, y: 340.4 , 0).wait(1).to( x: 302.1, y: 329.3 , 0).wait(1).to( x: 310.6, y: 318.3 , 0).wait(1).to( x: 319, y: 307.3 , 0).wait(1).to( x: 327.5, y: 296.3 , 0).wait(1).to( x: 335.9, y: 285.3 , 0).wait(1).to( x: 344.4, y: 274.3 , 0).wait(1).to( x: 352.8, y: 263.3 , 0).wait(1).to( x: 361.3, y: 252.3 , 0).wait(1).to( x: 369.7, y: 241.3 , 0).wait(1).to( x: 378.2, y: 230.3 , 0).wait(1).to( x: 386.6, y: 219.2 , 0).wait(1).to( x: 389.7, y: 230.4 , 0).wait(1).to( x: 392.8, y: 241.5 , 0).wait(1).to( x: 395.9, y: 252.6 , 0).wait(1).to( x: 399, y: 263.7 , 0).wait(1).to( x: 402, y: 274.8 , 0).wait(1).to( x: 405.1, y: 285.9 , 0).wait(1).to( x: 408.2, y: 297.1 , 0).wait(1).to( x: 411.3, y: 308.2 , 0).wait(1).to( x: 414.3, y: 319.3 , 0).wait(1).to( x: 417.4, y: 330.4 , 0).wait(1).to( x: 420.5, y: 341.5 , 0).wait(1).to( x: 423.6, y: 352.6 , 0).wait(1).to( x: 426.6, y: 363.7 , 0).wait(1).to( x: 429.7, y: 374.9 , 0).wait(1).to( x: 432.8, y: 386 , 0).wait(1).to( x: 435.9, y: 397.1 , 0).wait(1).to( x: 439, y: 408.2 , 0).wait(1).to( x: 442, y: 419.3 , 0).wait(1).to( x: 445.1, y: 430.4 , 0).wait(1).to( x: 448.2, y: 441.5 , 0).wait(1).to( x: 451.3, y: 452.7 , 0).wait(1).to( x: 454.3, y: 463.8 , 0).wait(1).to( x: 457.4, y: 474.9 , 0).wait(1).to( x: 460.5, y: 486 , 0).wait(1).to( x: 463.6, y: 497.1 , 0).wait(1).to( x: 466.6, y: 508.2 , 0).wait(1).to( x: 469.7, y: 519.4 , 0).wait(1).to( x: 472.8, y: 530.5 , 0).wait(1).to( x: 475.9, y: 541.6 , 0).wait(1).to( x: 478.9, y: 552.7 , 0).wait(1).to( x: 483.4, y: 545.4 , 0).wait(1).to( x: 487.8, y: 538.1 , 0).wait(1).to( x: 492.3, y: 530.8 , 0).wait(1).to( x: 496.7, y: 523.5 , 0).wait(1).to( x: 501.1, y: 516.2 , 0).wait(1).to( x: 505.6, y: 508.9 , 0).wait(1).to( x: 510, y: 501.6 , 0).wait(1).to( x: 514.4, y: 494.2 , 0).wait(1).to( x: 518.9, y: 486.9 , 0).wait(1).to( x: 523.3, y: 479.6 , 0).wait(1).to( x: 527.8, y: 472.3 , 0).wait(1).to( x: 532.2, y: 465 , 0).wait(1).to( x: 536.6, y: 457.7 , 0).wait(1).to( x: 541.1, y: 450.4 , 0).wait(1).to( x: 545.5, y: 443.1 , 0).wait(1).to( x: 549.9, y: 435.8 , 0).wait(1).to( x: 554.4, y: 428.5 , 0).wait(1).to( x: 558.8, y: 421.2 , 0).wait(1).to( x: 563.2, y: 413.9 , 0).wait(1).to( x: 567.7, y: 406.6 , 0).wait(1).to( x: 572.1, y: 399.3 , 0).wait(1).to( x: 576.6, y: 392 , 0).wait(1).to( x: 581, y: 384.6 , 0).wait(1).to( x: 585.4, y: 377.3 , 0).wait(1).to( x: 589.9, y: 370 , 0).wait(1).to( x: 594.3, y: 362.7 , 0).wait(1).to( x: 598.7, y: 355.4 , 0).wait(1).to( x: 603.2, y: 348.1 , 0).wait(1).to( x: 607.6, y: 340.8 , 0).wait(1).to( x: 612, y: 333.5 , 0).wait(1).to( x: 614.4, y: 340.8 , 0).wait(1).to( x: 616.7, y: 348 , 0).wait(1).to( x: 619.1, y: 355.3 , 0).wait(1).to( x: 621.4, y: 362.5 , 0).wait(1).to( x: 623.8, y: 369.8 , 0).wait(1).to( x: 626.1, y: 377 , 0).wait(1).to( x: 628.5, y: 384.3 , 0).wait(1).to( x: 630.8, y: 391.5 , 0).wait(1).to( x: 633.2, y: 398.8 , 0).wait(1).to( x: 635.5, y: 406 , 0).wait(1).to( x: 637.9, y: 413.3 , 0).wait(1).to( x: 640.2, y: 420.6 , 0).wait(1).to( x: 642.6, y: 427.8 , 0).wait(1).to( x: 644.9, y: 435.1 , 0).wait(1).to( x: 647.3, y: 442.3 , 0).wait(1).to( x: 649.6, y: 449.6 , 0).wait(1).to( x: 652, y: 456.8 , 0).wait(1).to( x: 654.3, y: 464.1 , 0).wait(1).to( x: 656.7, y: 471.3 , 0).wait(1).to( x: 659, y: 478.6 , 0).wait(1).to( x: 661.4, y: 485.9 , 0).wait(1).to( x: 663.7, y: 493.1 , 0).wait(1).to( x: 666.1, y: 500.4 , 0).wait(1).to( x: 668.4, y: 507.6 , 0).wait(1).to( x: 670.8, y: 514.9 , 0).wait(1).to( x: 673.1, y: 522.1 , 0).wait(1).to( x: 675.5, y: 529.4 , 0).wait(1).to( x: 677.8, y: 536.6 , 0).wait(1).to( x: 680.2, y: 543.9 , 0).wait(1).to( x: 682.5, y: 551.1 , 0).wait(1).to( x: 686.3, y: 546.6 , 0).wait(1).to( x: 690.1, y: 542 , 0).wait(1).to( x: 693.8, y: 537.4 , 0).wait(1).to( x: 697.6, y: 532.8 , 0).wait(1).to( x: 701.4, y: 528.2 , 0).wait(1).to( x: 705.2, y: 523.6 , 0).wait(1).to( x: 709, y: 519 , 0).wait(1).to( x: 712.7, y: 514.4 , 0).wait(1).to( x: 716.5, y: 509.8 , 0).wait(1).to( x: 720.3, y: 505.3 , 0).wait(1).to( x: 724.1, y: 500.7 , 0).wait(1).to( x: 727.9, y: 496.1 , 0).wait(1).to( x: 731.6, y: 491.5 , 0).wait(1).to( x: 735.4, y: 486.9 , 0).wait(1).to( x: 739.2, y: 482.3 , 0).wait(1).to( x: 743, y: 477.7 , 0).wait(1).to( x: 746.7, y: 473.1 , 0).wait(1).to( x: 750.5, y: 468.5 , 0).wait(1).to( x: 754.3, y: 463.9 , 0).wait(1).to( x: 758.1, y: 459.4 , 0).wait(1).to( x: 761.9, y: 454.8 , 0).wait(1).to( x: 765.6, y: 450.2 , 0).wait(1).to( x: 769.4, y: 445.6 , 0).wait(1).to( x: 773.2, y: 441 , 0).wait(1).to( x: 777, y: 436.4 , 0).wait(1).to( x: 780.8, y: 431.8 , 0).wait(1).to( x: 784.5, y: 427.2 , 0).wait(1).to( x: 788.3, y: 422.6 , 0).wait(1).to( x: 792.1, y: 418 , 0).wait(1).to( x: 795.5, y: 422.5 , 0).wait(1).to( x: 799, y: 426.9 , 0).wait(1).to( x: 802.4, y: 431.4 , 0).wait(1).to( x: 805.9, y: 435.8 , 0).wait(1).to( x: 809.3, y: 440.2 , 0).wait(1).to( x: 812.8, y: 444.7 , 0).wait(1).to( x: 816.2, y: 449.1 , 0).wait(1).to( x: 819.7, y: 453.5 , 0).wait(1).to( x: 823.1, y: 458 , 0).wait(1).to( x: 826.5, y: 462.4 , 0).wait(1).to( x: 830, y: 466.9 , 0).wait(1).to( x: 833.4, y: 471.3 , 0).wait(1).to( x: 836.9, y: 475.7 , 0).wait(1).to( x: 840.3, y: 480.2 , 0).wait(1).to( x: 843.8, y: 484.6 , 0).wait(1).to( x: 847.2, y: 489 , 0).wait(1).to( x: 850.7, y: 493.5 , 0).wait(1).to( x: 854.1, y: 497.9 , 0).wait(1).to( x: 857.6, y: 502.3 , 0).wait(1).to( x: 861, y: 506.8 , 0).wait(1).to( x: 864.4, y: 511.2 , 0).wait(1).to( x: 867.9, y: 515.7 , 0).wait(1).to( x: 871.3, y: 520.1 , 0).wait(1).to( x: 874.8, y: 524.5 , 0).wait(1).to( x: 878.2, y: 529 , 0).wait(1).to( x: 881.7, y: 533.4 , 0).wait(1).to( x: 885.1, y: 537.8 , 0).wait(1).to( x: 888.6, y: 542.3 , 0).wait(1).to( x: 892, y: 546.7 , 0).wait(1).to( x: 895.4, y: 551.1 , 0).wait(1).to( x: 897.1, y: 550.3 , 0).wait(1).to( x: 898.7, y: 549.4 , 0).wait(1).to( x: 900.3, y: 548.5 , 0).wait(1).to( x: 901.9, y: 547.6 , 0).wait(1).to( x: 903.5, y: 546.7 , 0).wait(1).to( x: 905.1, y: 545.8 , 0).wait(1).to( x: 906.8, y: 544.9 , 0).wait(1).to( x: 908.4, y: 544.1 , 0).wait(1).to( x: 910, y: 543.2 , 0).wait(1).to( x: 911.6, y: 542.3 , 0).wait(1).to( x: 913.2, y: 541.4 , 0).wait(1).to( x: 914.8, y: 540.5 , 0).wait(1).to( x: 916.5, y: 539.6 , 0).wait(1).to( x: 918.1, y: 538.7 , 0).wait(1).to( x: 919.7, y: 537.8 , 0).wait(1).to( x: 921.3, y: 537 , 0).wait(1).to( x: 922.9, y: 536.1 , 0).wait(1).to( x: 924.5, y: 535.2 , 0).wait(1).to( x: 926.2, y: 534.3 , 0).wait(1).to( x: 927.8, y: 533.4 , 0).wait(1).to( x: 929.4, y: 532.5 , 0).wait(1).to( x: 931, y: 531.6 , 0).wait(1).to( x: 932.6, y: 530.8 , 0).wait(1).to( x: 934.2, y: 529.9 , 0).wait(1).to( x: 935.9, y: 529 , 0).wait(1).to( x: 937.5, y: 528.1 , 0).wait(1).to( x: 939.1, y: 527.2 , 0).wait(1).to( x: 940.7, y: 526.3 , 0).wait(1).to( x: 942.3, y: 525.4 , 0).wait(1).to( x: 943.9, y: 524.5 , 0).wait(1).to( x: 945.6, y: 525.6 , 0).wait(1).to( x: 947.3, y: 526.7 , 0).wait(1).to( x: 949, y: 527.8 , 0).wait(1).to( x: 950.6, y: 528.9 , 0).wait(1).to( x: 952.3, y: 530 , 0).wait(1).to( x: 954, y: 531.1 , 0).wait(1).to( x: 955.6, y: 532.2 , 0).wait(1).to( x: 957.3, y: 533.3 , 0).wait(1).to( x: 959, y: 534.4 , 0).wait(1).to( x: 960.6, y: 535.5 , 0).wait(1).to( x: 962.3, y: 536.6 , 0).wait(1).to( x: 964, y: 537.7 , 0).wait(1).to( x: 965.7, y: 538.8 , 0).wait(1).to( x: 967.3, y: 539.9 , 0).wait(1).to( x: 969, y: 541 , 0).wait(1).to( x: 970.7, y: 542.1 , 0).wait(1).to( x: 972.3, y: 543.2 , 0).wait(1).to( x: 974, y: 544.3 , 0).wait(1).to( x: 975.7, y: 545.4 , 0).wait(1).to( x: 977.3, y: 546.4 , 0).wait(1).to( x: 979, y: 547.5 , 0).wait(1).to( x: 980.7, y: 548.6 , 0).wait(1).to( x: 982.4, y: 549.7 , 0).wait(1).to( x: 984, y: 550.8 , 0).wait(1).to( x: 985.7, y: 551.9 , 0).wait(1).to( x: 987.4, y: 553 , 0).wait(1).to( x: 989, y: 554.1 , 0).wait(1).to( x: 990.7, y: 555.2 , 0).wait(1).to( x: 992.4, y: 556.3 , 0).wait(1).to( x: 994, y: 557.4 , 0).wait(1).to( x: 998.6, y: 557.6 , 0).wait(1).to( x: 1003.1, y: 557.8 , 0).wait(1).to( x: 1007.6, y: 558 , 0).wait(1).to( x: 1012.1, y: 558.2 , 0).wait(1).to( x: 1016.6, y: 558.4 , 0).wait(1).to( x: 1021.1, y: 558.6 , 0).wait(1).to( x: 1025.6, y: 558.8 , 0).wait(1).to( x: 1030.1, y: 559 , 0).wait(1).to( x: 1034.6, y: 559.2 , 0).wait(1).to( x: 1039.1, y: 559.4 , 0).wait(1).to( x: 1043.6, y: 559.5 , 0).wait(1).to( x: 1048.1, y: 559.7 , 0).wait(1).to( x: 1052.6, y: 559.9 , 0).wait(1).to( x: 1057.1, y: 560.1 , 0).wait(1).to( x: 1061.6, y: 560.3 , 0).wait(1).to( x: 1066.1, y: 560.5 , 0).wait(1).to( x: 1070.6, y: 560.7 , 0).wait(1).to( x: 1075.1, y: 560.9 , 0).wait(1).to( x: 1079.6, y: 561.1 , 0).wait(1).to( x: 1084.1, y: 561.3 , 0).wait(1).to( x: 1088.6, y: 561.5 , 0).wait(1).to( x: 1093.1, y: 561.7 , 0).wait(1).to( x: 1097.6, y: 561.9 , 0).wait(1).to( x: 1102.1, y: 562.1 , 0).wait(1).to( x: 1106.6, y: 562.3 , 0).wait(1).to( x: 1111.1, y: 562.5 , 0).wait(1).to( x: 1115.6, y: 562.7 , 0).wait(1).to( x: 1120.1, y: 562.9 , 0).wait(1).to( x: 1124.6, y: 563.1 , 0).wait(1).to( x: 1129.1, y: 563.3 , 0).wait(1).to( x: 1133.6, y: 563.5 , 0).wait(1).to( x: 1138.1, y: 563.6 , 0).wait(1));
).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(309.8,339.2,200,200);
// library properties:
lib.properties =
id: 'E02FBD3CAEA74D4DA3569F226C585888',
width: 1014,
height: 650,
fps: 30,
color: "#FFFFFF",
opacity: 1.00,
manifest: [],
preloads: []
;
// bootstrap callback support:
(lib.Stage = function (canvas)
createjs.Stage.call(this, canvas);
).prototype = p = new createjs.Stage();
p.setAutoPlay = function(autoPlay)
this.tickEnabled = autoPlay;
p.play = function() this.tickEnabled = true; this.getChildAt(0).gotoAndPlay(this.getTimelinePosition())
p.stop = function(ms) if(ms) this.seek(ms); this.tickEnabled = false;
p.seek = function(ms) this.tickEnabled = true; this.getChildAt(0).gotoAndStop(lib.properties.fps * ms / 1000);
p.getDuration = function() return this.getChildAt(0).totalFrames / lib.properties.fps * 1000;
p.getTimelinePosition = function() return this.getChildAt(0).currentFrame / lib.properties.fps * 1000;
an.bootcompsLoaded = an.bootcompsLoaded || [];
if(!an.bootstrapListeners)
an.bootstrapListeners=[];
an.bootstrapCallback=function(fnCallback)
an.bootstrapListeners.push(fnCallback);
if(an.bootcompsLoaded.length > 0)
for(var i=0; i<an.bootcompsLoaded.length; ++i)
fnCallback(an.bootcompsLoaded[i]);
;
an.compositions = an.compositions || ;
an.compositions['E02FBD3CAEA74D4DA3569F226C585888'] =
getStage: function() return exportRoot.getStage(); ,
getLibrary: function() return lib; ,
getSpriteSheet: function() return ss; ,
getImages: function() return img;
;
an.compositionLoaded = function(id)
an.bootcompsLoaded.push(id);
for(var j=0; j<an.bootstrapListeners.length; j++)
an.bootstrapListeners[j](id);
an.getComposition = function(id)
return an.compositions[id];
)(createjs = createjs||, AdobeAn = AdobeAn||);
2) Uncaught ReferenceError: AdobeAn is not defined
var canvas, stage, exportRoot, anim_container, dom_overlay_container, fnStartAnimation;
console.log("Entered BallAnimSecondScript");
init();
function init()
console.log("Entered Init in BallAnim...");
canvas = document.getElementById("canvas");
anim_container = document.getElementById("animation_container");
dom_overlay_container = document.getElementById("dom_overlay_container");
var comp = AdobeAn.getComposition("E02FBD3CAEA74D4DA3569F226C585888");
var lib = comp.getLibrary();
handleComplete(, comp);
function handleComplete(evt, comp)
//This function is always called, irrespective of the content. You can use the variable "stage" after it is created in token create_stage.
var lib = comp.getLibrary();
var ss = comp.getSpriteSheet();
exportRoot = new lib.Untitled1();
stage = new lib.Stage(canvas);
//Registers the "tick" event listener.
fnStartAnimation = function ()
stage.addChild(exportRoot);
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
//Code to support hidpi screens and responsive scaling.
function makeResponsive(isResp, respDim, isScale, scaleType)
var lastW, lastH, lastS = 1;
window.addEventListener('resize', resizeCanvas);
resizeCanvas();
function resizeCanvas()
var w = lib.properties.width, h = lib.properties.height;
var iw = window.innerWidth, ih = window.innerHeight;
var pRatio = window.devicePixelRatio || 1, xRatio = iw / w, yRatio = ih / h, sRatio = 1;
if (isResp)
if ((respDim == 'width' && lastW == iw) || (respDim == 'height' && lastH == ih))
sRatio = lastS;
else if (!isScale)
if (iw < w || ih < h)
sRatio = Math.min(xRatio, yRatio);
else if (scaleType == 1)
sRatio = Math.min(xRatio, yRatio);
else if (scaleType == 2)
sRatio = Math.max(xRatio, yRatio);
canvas.width = w * pRatio * sRatio;
canvas.height = h * pRatio * sRatio;
canvas.style.width = dom_overlay_container.style.width = anim_container.style.width = w * sRatio + 'px';
canvas.style.height = anim_container.style.height = dom_overlay_container.style.height = h * sRatio + 'px';
stage.scaleX = pRatio * sRatio;
stage.scaleY = pRatio * sRatio;
lastW = iw; lastH = ih; lastS = sRatio;
stage.tickOnUpdate = false;
stage.update();
stage.tickOnUpdate = true;
makeResponsive(false, 'both', false, 1);
AdobeAn.compositionLoaded(lib.properties.id);
fnStartAnimation();
我已经花了两天时间寻找可能的解决方案,任何建议和/或解决方案将不胜感激。
如果在阅读本文后您认为您需要更多信息和/或详细信息,请告诉我,我会尽力帮助您。
【问题讨论】:
【参考方案1】:可能最简单的安装角度的方法是不使用模块。原因是模块的版本可能与生成动画 cc 文件/代码的版本不一致。相反,您可以做的只是获取导出的库并将它们作为链接添加到您的组件中。
<script src="path/to/createjs"></script>
<script src="path/to/anyOtherRequiredLibrary"></script>
然后在您的组件中,废弃 import * as createjs from 'createjs-module'
并改为:
declare var creates: any;
declare var AdobeAn: any;
这应该允许这条线运行)(createjs = createjs||, AdobeAn = AdobeAn||);
,这可能就是你得到的原因:createjs.Rectangle
好像createjs
var 不存在它正在用一个空对象替换它。
【讨论】:
【参考方案2】:要导入某些内容,您需要先将其导出。
模块在自己的范围内执行,而不是在全局范围内; 这意味着在 a 中声明的变量、函数、类等 模块在模块外是不可见的,除非它们是明确的 使用其中一种导出形式导出。反之,消费 从不同的地方导出的变量、函数、类、接口等 模块,必须使用其中一种导入形式导入。
https://www.typescriptlang.org/docs/handbook/modules.html
检查您的 createjs-module 并确保导出您需要的任何内容
【讨论】:
以上是关于Animate CC Canvas 导出嵌入角度模板的主要内容,如果未能解决你的问题,请参考以下文章
Adobe Animate CC (HTML5 Canvas) 中的按键事件
在 HTML 5 Canvas Animate CC 文档中包含代码文件
Adobe Animate CC Canvas (CreateJS) 矢量图形在放大时变得模糊
Adobe Animate CC、HTML5 Canvas - 将实例名称捕获为动态文本?