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: Adob​​eAn 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 - 将实例名称捕获为动态文本?

舞台上的 Adob​​e Animate CC Canvas 鼠标动作滞后且断断续续

如何在 Adob​​e Animate CC 中使用舞台宽度和高度(Canvas doc)