caching colors
diff --git a/player/index.html b/player/index.html
index d9baebd..92e6268 100644
--- a/player/index.html
+++ b/player/index.html
@@ -40,6 +40,6 @@
</head>
<body style="background-color:#666; margin: 10px;height: 100%; font-family: sans-serif;font-size: 10px">
<div id="loader"></div>
-<div style="width:800px;height:800px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/shapes" data-bm-player="0" data-anim-type="canvas" data-anim-loop="true"></div>
+<div style="width:500px;height:500px;background-color:#cccccc" class="bodymovin" data-animation-path="exports/shapes" data-bm-player="0" data-anim-type="canvas" data-anim-loop="false"></div>
</body>
</html>
diff --git a/player/js/renderers/CanvasRenderer.js b/player/js/renderers/CanvasRenderer.js
index 14c2a4b..cbea694 100644
--- a/player/js/renderers/CanvasRenderer.js
+++ b/player/js/renderers/CanvasRenderer.js
@@ -125,9 +125,9 @@
CanvasRenderer.prototype.renderFrame = function(num){
this.animationItem.container.width = this.animationItem.container.width;
this.canvasContext.transform(this.transformCanvas.sx,0,0,this.transformCanvas.sy,this.transformCanvas.tx,this.transformCanvas.ty);
+ this.canvasContext.beginPath();
this.canvasContext.rect(0,0,this.transformCanvas.w,this.transformCanvas.h);
this.canvasContext.clip();
-
this.prepareFrame(num);
this.draw();
};
\ No newline at end of file
diff --git a/player/js/utils/common.js b/player/js/utils/common.js
index ad9bf7c..5484b53 100644
--- a/player/js/utils/common.js
+++ b/player/js/utils/common.js
@@ -1,15 +1,15 @@
var subframeEnabled = false;
var supportsPath2D = typeof Path2D === 'function';
-supportsPath2D = false;
+var cachedColors = {};
var body;
function styleDiv(element){
- element.style.position = "absolute";
+ element.style.position = 'absolute';
element.style.top = 0;
element.style.left = 0;
- element.style.display = "block";
- element.style.verticalAlign = "top";
- element.style.backfaceVisibility = element.style.webkitBackfaceVisibility = "hidden";
+ element.style.display = 'block';
+ element.style.verticalAlign = 'top';
+ element.style.backfaceVisibility = element.style.webkitBackfaceVisibility = 'hidden';
//element.style.transformStyle = element.style.webkitTransformStyle = "preserve-3d";
styleUnselectableDiv(element);
}
@@ -34,23 +34,17 @@
function componentToHex(c) {
var hex = c.toString(16);
- return hex.length == 1 ? "0" + hex : hex;
+ return hex.length == 1 ? '0' + hex : hex;
}
function rgbToHex(r, g, b) {
- return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
-}
-
-function hexToRgb(hex) {
- var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return result ? {
- r: parseInt(result[1], 16),
- g: parseInt(result[2], 16),
- b: parseInt(result[3], 16)
- } : null;
+ return '#' + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
function fillToRgba(hex,alpha){
- var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
- return result ? 'rgba('+parseInt(result[1], 16)+','+parseInt(result[2], 16)+','+parseInt(result[3], 16)+','+ alpha+')' : null;
+ if(!cachedColors[hex]){
+ var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+ cachedColors[hex] = parseInt(result[1], 16)+','+parseInt(result[2], 16)+','+parseInt(result[3], 16);
+ }
+ return 'rgba('+cachedColors[hex]+','+alpha+')';
}
\ No newline at end of file
