1 goog.provide('lime.customNodes.CoverLens'); 2 3 4 goog.require('goog.math.Coordinate'); 5 goog.require('goog.style'); 6 goog.require('lime.CoverNode'); 7 goog.require('lime.Director'); 8 goog.require('lime.Node'); 9 10 11 lime.customNodes.CoverLens = function() { 12 lime.CoverNode.call(this); 13 14 this.center_ = new goog.math.Coordinate(0, 0); 15 this.outerRadius = 80; 16 this.innerRadius = 40; 17 this.outerAlpha = 0.83; 18 this.offset = new goog.math.Coordinate(0, 70); 19 20 }; 21 goog.inherits(lime.customNodes.CoverLens, lime.CoverNode); 22 23 /* 24 Object.defineProperty(lime.Node.prototype, 'center', { 25 get: function() {return this.center_;}, 26 set: function(value) { 27 lime.setObjectDirty(goog.bind(this.update,this)); 28 this.center_ = value; 29 } 30 }); 31 */ 32 lime.customNodes.CoverLens.prototype.getCenter = function() { 33 return this.center_; 34 }; 35 36 lime.customNodes.CoverLens.prototype.setCenter = function(value) { 37 lime.setObjectDirty(goog.bind(this.update, this)); 38 this.center_ = value; 39 }; 40 41 lime.customNodes.CoverLens.prototype.update = function() { 42 if (!this.director) return; 43 44 45 var style = this.baseElement.style, 46 dsize = this.director.getSize(), 47 dscale = this.director.getScale(), 48 quality = this.getQuality(), 49 size = this.getSize(); 50 51 if (arguments[0]) { 52 this.center = new goog.math.Coordinate( 53 dsize.width / 2, dsize.height / 2 54 ); 55 56 size = this.size_ = goog.style.getSize( 57 this.director.baseElement.parentNode); 58 59 style['width'] = 2 * size.width + 'px'; 60 style['height'] = 2 * size.height + 'px'; 61 62 this.baseElement.width = 63 (2 * size.width / dscale.x) * quality; 64 this.baseElement.height = 65 (2 * size.height / dscale.y) * quality; 66 67 this.setNeedsRedraw(); 68 } 69 var center = this.director.localToScreen(this.getCenter()); 70 style['-webkit-transform'] = 'translate3d(' + 71 (-size.width + center.x) + 'px,' + 72 (-size.height + center.y) + 'px,0px)'; 73 74 style['MozTransform'] = 'translate(' + 75 (-size.width + center.x) + 'px,' + 76 (-size.height + center.y) + 'px)'; 77 78 }; 79 80 81 lime.customNodes.CoverLens.prototype.drawInRect = function(box) { 82 var w = 0.5 * (box.right - box.left); 83 var h = 0.5 * (box.bottom - box.top); 84 85 var ctx = this.context; 86 87 // ctx.clearRect(box.left,box.top,w,h); 88 // set up gradient 89 var grad = ctx.createRadialGradient( 90 box.left + w - this.offset.x, box.top + h - this.offset.y, 91 this.innerRadius, 92 box.left + w - this.offset.x, box.top + h - this.offset.y, 93 this.outerRadius 94 ); 95 96 var stops = {0: 'rgba(0,0,0,0)', 1: 'rgba(0,0,0,' + this.outerAlpha + ')'}; 97 98 for (var position in stops) { 99 var color = stops[position]; 100 grad.addColorStop(position, color); 101 } 102 103 ctx.fillStyle = grad; 104 ctx.beginPath(); 105 ctx.moveTo(box.left, box.top); 106 ctx.lineTo(box.left, box.bottom); 107 ctx.lineTo(box.right, box.bottom); 108 ctx.lineTo(box.right, box.top); 109 ctx.closePath(); 110 ctx.fill(); 111 }; 112