I have an HTML file that shows a racecar going around a track. The file looks fine in Safari, but in my app all I see is a small window containing a fraction of the track, even though the UIWebView is supposedly covering the whole view.
Here's the HTML code:
And here's my view controller's .m file:
Here's the HTML code:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content = "initial-scale = 1.0">
<title>racecar</title>
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script>
(function (lib, img, cjs) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 1024,
height: 768,
fps: 33,
color: "#00CC00",
manifest: []
};
// symbols:
(lib.Symbol1 = function() {
this.initialize();
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(1,0,1).p("A3f7kMAu/AAAQGfAAEkElQElElAAGeIAAX5QAAGeklElQkkElmfAAMgu/AAAQmfAAklklQioiphHjQQg1iaAAiwIAA35QAAmeEkklQElklGfAAg");
this.shape.setTransform(250.5,176.5);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f().s("#000000").ss(1,1,1).p("AqSwyIUlAAQGfAAEkElQElElAAGeIAACVQAAGeklEkQkkEmmfAAI0lAAQmfAAklkmQkkkkAAmeIAAiVQAAmeEkklQElklGfAAg");
this.shape_1.setTransform(259,183.5);
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("#000000").s().p("A3fbkQmfAAklkkQioiphHjQQg1ibAAiwIAA34QAAmeEkklQElklGfAAMAu/AAAQGfAAEkElQElElAAGeIAAX4QAAGfklElQkkEkmfAAgA0BrHQkkElAAGfIAACTQAAGfEkElQElEkGfAAIUlAAQGfAAEkkkQElklAAmfIAAiTQAAmfklklQkkkkmfgBI0lAAQmfABklEkg");
this.shape_2.setTransform(250.5,176.5);
this.addChild(this.shape_2,this.shape_1,this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-1,-1,503,355);
(lib.Car = function() {
this.initialize();
// 41
this.text = new cjs.Text("41", "21px 'Times'", "#0066CC");
this.text.lineHeight = 23;
this.text.lineWidth = 24;
this.text.setTransform(10.3,23.1);
// Layer 1
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(1,1,1).p("ACnAAQAABIgyA0QgxAzhEAAQhEAAgxgzQgxg0AAhIQAAhHAxg0QAxgzBEAAQBEAAAxAzQAyA0AABHg");
this.shape.setTransform(21.3,38.8);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f().s("#000000").ss(1,0,1).p("AhLldICXAAQCIAAAACIIAAGrQAACIiIAAIiXAAQiIAAAAiIIAAmrQAAiICIAAg");
this.shape_1.setTransform(21.2,35);
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("#FFFFFF").s().p("Ah1B8Qgxg0ABhIQgBhHAxg0QAygzBDAAQBFAAAwAzQAyA0AABHQAABIgyA0QgwAzhFAAQhDAAgygzg");
this.shape_2.setTransform(21.3,38.8);
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.f("carColor").s().p("AhLFeQiHgBgBiHIAAmrQABiHCHgBICXAAQCIABgBCHIAAGrQABCHiIABgAh0hVQgxAzAABHQAABJAxA0QAxAzBDAAQBFAAAxgzQAxg0AAhJQAAhHgxgzQgxgzhFAAQhDAAgxAzg");
this.shape_3.setTransform(21.2,35);
this.addChild(this.shape_3,this.shape_2,this.shape_1,this.shape,this.text);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-1,-1,44.4,72);
// stage content:
(lib.racecar = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Car
this.instance = new lib.Car("synched",0);
this.instance.setTransform(151.6,555.7,1.424,1.422,0,0,0,29.9,49.5);
this.timeline.addTween(cjs.Tween.get(this.instance).wait(1).to({regX:21.2,regY:35,rotation:1.5,x:137.3,y:502.5},0).wait(1).to({rotation:3.3,x:136.4,y:469.6},0).wait(1).to({rotation:5.5,x:136.7,y:436.5},0).wait(1).to({rotation:8,x:138.7,y:403.4},0).wait(1).to({rotation:11.2,x:142.4,y:370.1},0).wait(1).to({rotation:15.1,x:148.6,y:336.9},0).wait(1).to({rotation:20,x:157.6,y:304.2},0).wait(1).to({rotation:26.2,x:170.4,y:272.3},0).wait(1).to({rotation:34,x:187.6,y:242.1},0).wait(1).to({rotation:43.4,x:209.8,y:214.8},0).wait(1).to({rotation:54,x:237.2,y:191.9},0).wait(1).to({rotation:65,x:268.6,y:174.6},0).wait(1).to({rotation:75,x:302.4,y:163},0).wait(1).to({rotation:94.8,x:342,y:168.4},0).wait(1).to({rotation:95.4,x:382.4,y:168.7},0).wait(1).to({rotation:95.7,x:420.9,y:169.1},0).wait(1).to({rotation:95.9,x:459.5,y:169.5},0).wait(1).to({rotation:96,x:498.3,y:170.2},0).wait(1).to({rotation:96.2,x:537,y:170.8},0).wait(1).to({rotation:96.3,x:575.9,y:171.7},0).wait(1).to({rotation:96.5,x:615,y:172.6},0).wait(1).to({rotation:96.7,x:654.1,y:173.6},0).wait(1).to({rotation:97.2,x:693.5,y:175.1},0).wait(1).to({rotation:101,x:734.1,y:178.9},0).wait(1).to({rotation:104.8,x:768.6,y:182.5},0).wait(1).to({rotation:114.2,x:809.7,y:197.8},0).wait(1).to({rotation:121.5,x:846.6,y:217.1},0).wait(1).to({rotation:127.5,x:875.6,y:236.8},0).wait(1).to({rotation:127.7,x:914.3,y:261.5},0).wait(1).to({rotation:163,x:929.9,y:294},0).wait(1).to({rotation:175.1,x:938.1,y:346.8},0).wait(1).to({rotation:182.3,x:938.8,y:387.3},0).wait(1).to({rotation:190,x:936.2,y:392.5},0).wait(1).to({rotation:188.4,x:934.3,y:441},0).wait(1).to({rotation:188.7,x:931.6,y:485.4},0).wait(1).to({rotation:189.1,x:928.9,y:526.6},0).wait(1).to({rotation:189.6,x:925.7,y:567.9},0).wait(1).to({rotation:191,x:921.7,y:610.7},0).wait(1).to({rotation:204.7,x:907.3,y:651.3},0).wait(1).to({rotation:231,x:879.1,y:682.8},0).wait(1).to({rotation:246.9,x:843.6,y:702.6},0).wait(1).to({rotation:265.7,x:795.9,y:719.7},0).wait(1).to({rotation:273.3,x:755.3,y:722.8},0).wait(1).to({rotation:274.9,x:711,y:723.2},0).wait(1).to({rotation:275.5,x:668.4,y:723},0).wait(1).to({rotation:275.8,x:625.8,y:722.5},0).wait(1).to({rotation:275.9,x:583.2,y:722},0).wait(1).to({rotation:275.8,x:540.3,y:721.5},0).wait(1).to({rotation:275.3,x:497,y:721.3},0).wait(1).to({rotation:272.7,x:450.1,y:722.7},0).wait(1).to({rotation:274.6,x:420.2,y:724.5},0).wait(1).to({rotation:281.1,x:368.8,y:720.6},0).wait(1).to({rotation:293.6,x:324.7,y:708.1},0).wait(1).to({rotation:301.2,x:285.8,y:689.3},0).wait(1).to({rotation:306.2,x:246.6,y:666.1},0).wait(1).to({rotation:313.8,x:210.8,y:638.4},0).wait(1).to({rotation:320.6,x:179.6,y:606.2},0).wait(1).to({rotation:323.7,x:150,y:572.7},0).wait(1).to({rotation:329.9,x:123,y:536.5},0).wait(1));
// Layer 3
this.instance_1 = new lib.Symbol1();
this.instance_1.setTransform(526,433.3,1.896,1.896,0,0,0,250.5,176.5);
this.timeline.addTween(cjs.Tween.get(this.instance_1).wait(60));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(562,481.6,952,671.4);
})(lib = lib||{}, images = images||{}, createjs = createjs||{});
var lib, images, createjs;
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRoot = new lib.racecar();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1024" height="768" style="background-color:#00CC00"></canvas>
</body>
</html>And here's my view controller's .m file:
Code:
@interface ViewController ()
@end
@implementation ViewController
@synthesize webView = _webView;
- (void)viewDidLoad {
[super viewDidLoad];
NSURL *url = [[NSBundle mainBundle] URLForResource:@"racecar" withExtension:@"html"];
NSError *error;
NSMutableString *html = [[NSString stringWithContentsOfURL:url encoding:NSUTF8StringEncoding error:&error] mutableCopy];
// Inject the desired race car color value into the HTML file.
[html replaceOccurrencesOfString:@"carColor" withString:@"#009999" options:NSCaseInsensitiveSearch range:NSMakeRange(0, [html length])];
[_webView loadHTMLString:html baseURL:nil];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
[self setWebView:nil];
}
-(void)webViewDidFinishLoad:(UIWebView *)webView
{
}
@end
Last edited:
