2014年1月5日 星期日

Javascript 點點圖工具

Rubik's Art Painter

相片轉換到扭計骰的效果不太好,所以用 Javascript 寫了一個《Rubik's Art Painter》方便自己。另外,花了 HK$140 購入了 60 顆迷你扭計骰,質素都不錯。
function onMouseMove(event)  {
  var mouseX = event.clientX-_canvas.offsetLeft;
  var mouseY = event.clientY-_canvas.offsetTop;

  if (_mouseState == 0)  {return;}

  var x = Math.floor((mouseX-1)/16);
  var y = Math.floor((mouseY-1)/16);
  if (x < 0 || y < 0)  {return;}

  var index = (y*_imageWidth)+x;
  _patternArray[index] = _currentColorID;

  x = (x*16)+1;
  y = (y*16)+1;
  _context.fillRect(x, y, 16-1, 16-1);
}

//----------------------------------------------------------
function onMouseUp(event)  {
  var mouseX = event.clientX-_canvas.offsetLeft;
  var mouseY = event.clientY-_canvas.offsetTop;
  _mouseState = 0;
}

//----------------------------------------------------------
function saveImage()  {
  var codeString = "";
  var index = 0;
  var colorID;

  for (var y=0; y<_imageHeight; y+=3)  {
    for (var x=0; x<_imageWidth; x+=3)  {

      index = (y*_imageWidth)+x;

      colorID = _patternArray[index+0];  codeString += colorID+",";
      colorID = _patternArray[index+1];  codeString += colorID+",";
      colorID = _patternArray[index+2];  codeString += colorID+",";

      colorID = _patternArray[index+_imageWidth+0];  codeString += colorID+",";
      colorID = _patternArray[index+_imageWidth+1];  codeString += colorID+",";
      colorID = _patternArray[index+_imageWidth+2];  codeString += colorID+",";

      colorID = _patternArray[index+_imageWidth+_imageWidth+0];  codeString += colorID+",";
      colorID = _patternArray[index+_imageWidth+_imageWidth+1];  codeString += colorID+",";
      colorID = _patternArray[index+_imageWidth+_imageWidth+2];  codeString += colorID+",";
    }
  }
  alert(codeString);
}

沒有留言: