index.js 2.81 KB
Newer Older
liujiangnan's avatar
liujiangnan committed
1 2 3 4 5 6


var ctx, sprite, img, _w, _h, play;
function initPreviewPage(imgIndex, callback){  
  img = new Image(); 
  img.onload = function(){
liujiangnan's avatar
liujiangnan committed
7 8 9 10 11 12 13
    // play=$("#play");
    // play.attr("width",img.width);
    // play.attr("height",img.height);
    play = document.createElement('canvas');
    $(play).attr("width",img.width);
    $(play).attr("height",img.height);
    ctx=play.getContext("2d");  
liujiangnan's avatar
liujiangnan committed
14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34
    ctx.clearRect(0, 0, img.width, img.height); 
    ctx.drawImage(img,0,0);  

    renderText(imgIndex);

    callback&&callback(); 
  }
  img.src = "../lib/images/jiangzhuang_Img"+imgIndex+"@3x.png"; 
}

function renderText(imgIndex){
  var praise = $("#praise").val();
  var date = $("#date").val();
  var sign = $("#sign").val();
  ctx.font="18px Arial";
  ctx.textAlign='center';
  if(imgIndex==1){
    ctx.fillText(praise,230,170); 
    ctx.fillText(date,325,240);
    ctx.fillText(sign,150,240);
  } else if (imgIndex==2){
liujiangnan's avatar
liujiangnan committed
35 36 37 38
    ctx.font="30px Arial";
    ctx.fillText("You are very good!",410,330); 
    ctx.fillText("2019-12-24",275,495);
    ctx.fillText("Tom",605,495);
liujiangnan's avatar
liujiangnan committed
39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60
  } else if (imgIndex==3){
    ctx.fillText(praise,230,155); 
    ctx.fillText(date,255,205);
    ctx.fillText(sign,255,255);
  } else if (imgIndex==4){
    ctx.fillText(praise,250,120); 
    ctx.fillText(date,210,240);
    ctx.fillText(sign,335,240);
  } else if (imgIndex==5){
    ctx.fillText(praise,250,165); 
    ctx.fillText(date,250,250); 
  } else if (imgIndex==6){
    ctx.fillText(praise,270,185); 
    ctx.fillText(date,305,267);
    ctx.fillText(sign,305,225);
  }
  
}

$(function(){ 

  _w = $(window).width();
liujiangnan's avatar
liujiangnan committed
61
  _h = $(window).height(); 
liujiangnan's avatar
liujiangnan committed
62 63 64 65 66 67 68 69 70

  $(".img-area").bind('click',function(){ 
    $(".check-item").attr("checked",false).hide();
    $(this).find(".check-item").attr("checked",true).show();
    $(".alert").html("").hide();
  });

  $(".close-view").bind('click',function(){
    $(this).hide();
liujiangnan's avatar
liujiangnan committed
71
    $("#playView").hide();
liujiangnan's avatar
liujiangnan committed
72 73 74 75 76 77 78 79 80 81
    $(".edit-form").show(); 
  });

  $(".preview").bind('click', function(){
    let cardIndex = $('input:checkbox[class="check-item"]:checked').eq(0).val();  
    if(cardIndex==undefined){
      $(".alert").html("请选择奖状!").show(300);
      return;
    }
    $(".edit-form").hide(); 
liujiangnan's avatar
liujiangnan committed
82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99
    initPreviewPage(cardIndex,function(){ 
      let imgUrl = play.toDataURL('image/jpeg', 1.0);
      $('#playView').attr('src', imgUrl);
      $('#playView').css({height: _w});
      $('#playView')[0].onload = function(){
        var play_w = $('#playView').width();
        var right = Math.floor(play_w/2)+35;  
        var top = _w-Math.floor(play_w/2)-35;
        var margin_top = Math.floor((_h-play_w)/2);
        $('#playView').css({
          "position": "absolute",
          "transform":"rotate(90deg)",
          "right": (right-_w)+"px",
          "top": (top+margin_top)+"px"
        }).show();
      };  
    }); 
    $(".close-view").show();  
liujiangnan's avatar
liujiangnan committed
100 101 102
  });

});