class.js

   1 TTweet = enchant.Class.create(enchant.Sprite, {
   2         initialize : function(w, h) {
   3                 this.lifetime = 0;
   4                 enchant.Sprite.call(this, w, h + TTweet.TAIL);
   5                 this.image = new Surface(w, h + TTweet.TAIL);
   6                 var t = TTweet.TAIL;
   7                 var s = TTweet.SIZE;
   8                 var c = TTweet.CURVE;
   9                 this.outCurve = {
  10                         lt : {x:  0, y:  t},
  11                         rt : {x:  w, y:  t},
  12                         rd : {x:  w, y:h+t},
  13                         ld : {x:  0, y:h+t}
  14                 };
  15                 this.inCurve = {
  16                         lt : {x:  0+s, y:  t+s},
  17                         rt : {x:  w-s, y:  t+s},
  18                         rd : {x:  w-s, y:h+t-s},
  19                         ld : {x:  0+s, y:h+t-s}
  20                 };
  21                 this.image.context.font = "12px 'Times New Roman'";
  22                 this.addEventListener('enterframe', function(){
  23                         if((this.age % 15) == 0){
  24                                 this.lifetime--;
  25                         }
  26                         if(this.lifetime <= 0){
  27                                 this.lifetime = 0;
  28                                 this.opacity = 0;
  29                         }
  30                 });
  31         },
  32         reDraw : function() {
  33                 var c = TTweet.CURVE;
  34                 var o = this.outCurve;
  35                 with(this.image.context) {
  36                         fillStyle = 'black';
  37                         strokeStyle = 'black';
  38                         beginPath();
  39                         moveTo(o.lt.x, o.lt.y+c);
  40                         quadraticCurveTo(o.lt.x, o.lt.y, o.lt.x+c, o.lt.y);
  41                         lineTo(o.rt.x-c, o.rt.y);
  42                         quadraticCurveTo(o.rt.x, o.rt.y, o.rt.x, o.rt.y+c);
  43                         lineTo(o.rd.x, o.rd.y-c);
  44                         quadraticCurveTo(o.rd.x, o.rd.y, o.rd.x-c, o.rd.y);
  45                         lineTo(o.ld.x+c, o.ld.y);
  46                         quadraticCurveTo(o.ld.x, o.ld.y, o.ld.x, o.ld.y-c);
  47                         // しっぽ
  48                         // var _height = 100;
  49                         // lineTo(this.width/2-4,_height + TTweet.TAIL);
  50                         // lineTo(this.width/2,_height + 0);
  51                         // lineTo(this.width/2+4,_height + TTweet.TAIL);
  52                         closePath();
  53                         fill();
  54                         stroke();
  55                 };
  56                 this.clear();
  57         },
  58         clear : function() {
  59                 var c = TTweet.CURVE;
  60                 var o = this.outCurve;
  61                 var i = this.inCurve;
  62                 with(this.image.context) {
  63                         // 抜く
  64                         fillStyle = 'white';
  65                         beginPath();
  66                         moveTo(i.lt.x, o.lt.y+c);
  67                         quadraticCurveTo(i.lt.x, i.lt.y, o.lt.x+c, i.lt.y);
  68                         lineTo(o.rt.x-c, i.rt.y);
  69                         quadraticCurveTo(i.rt.x, i.rt.y, i.rt.x, o.rt.y+c);
  70                         lineTo(i.rd.x, o.rd.y-c);
  71                         quadraticCurveTo(i.rd.x, i.rd.y, o.rd.x-c, i.rd.y);
  72                         lineTo(o.ld.x+c, i.ld.y);
  73                         quadraticCurveTo(i.ld.x, i.ld.y, i.ld.x, o.ld.y-c);
  74                         closePath();
  75                         fill();
  76                 };
  77         },
  78         text : function(text, x, y) {
  79                 this.clear();
  80                 this.opacity = 0.8;
  81
  82                 this.reDraw();
  83                 with(this.image.context) {
  84                         // var size = measureText(text);
  85                         fillStyle = 'black';
  86                         textAlign = 'center';
  87                         textBaseline = 'middle';
  88                         this.x = x;
  89                         this.y = y;
  90                         // fillText(text,this.width/2,this.height/2);
  91                         // console.log(size);
  92                         // this.width = size;
  93                         // console.log(this.width);
  94                         // this.reDraw();
  95                         this.fillTextLine(text,this.width/2,this.height/2);
  96                 }
  97                 this.lifetime = 7;
  98
  99         },
 100         fillTextLine : function(text, x, y) {
 101                 var textList = text.split("\n");
 102                 var lineHeight = this.image.context.measureText("あ").width + 2;
 103                 var self = this;
 104                 textList.forEach(function(text, i) {
 105                         self.image.context.fillText(text, x, y + lineHeight * i);
 106                 });
 107         },
 108
 109
 110 });
 111 TTweet.TAIL  =  8;
 112 TTweet.SIZE  =  2;
 113 TTweet.CURVE = 16;
 114
 115 //how to use
 116 //var tweet = new TTweet(128, 64);
 117 //tweet.text("ABCDEFG");