BloggerAds廣告

相關文章

2016年9月1日 星期四

solve createjs DOMElement responsive

replace the function p._handleDrawEnd in Easeljs with the code below

credits to Ferry Kranenburg
http://stackoverflow.com/questions/27593088/using-domelement-input-text-and-resizing-canvas

p._handleDrawEnd = function(evt) {
  var o = this.htmlElement;
  if (!o) { return; }
  var style = o.style;

  var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix;

  var visibility = props.visible ? "visible" : "hidden";
  if (visibility != style.visibility) { style.visibility = visibility; }
  if (!props.visible) { return; }

  // Change position of domElement
  var stage = this.getStage();        
  var ratio = $(canvas).width() / 1000; //replace the number to your canvas width
  mtx.scale(ratio,ratio);
  mtx.tx = mtx.tx*ratio;
  mtx.ty = mtx.ty*ratio;
  // End change position of domElement

  var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix;
  var n = 10000; // precision

  if (!oldMtx || !oldMtx.equals(mtx)) {
   var str = "matrix(" + (mtx.a*n|0)/n +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n +","+ (mtx.tx+0.5|0);
   style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0) +")";
   style.MozTransform = str +"px,"+ (mtx.ty+0.5|0) +"px)";
   if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); }
   oldProps.matrix.copy(mtx);
  }

  if (oldProps.alpha != props.alpha) {
   style.opacity = ""+(props.alpha*n|0)/n;
   oldProps.alpha = props.alpha;
  }

 };