jYYYoq

index.html

<div id="container"></div>
<div id="container2"></div>

jyyyoq.markdown

jYYYoq

A Pen by Radium on CodePen.

License.

script.js

    var stage = new Konva.Stage({
      container: 'container',
      width: 340,
      height: 300,
      draggable: true
    });
   var stage2 = new Konva.Stage({
      container: 'container2',
      width: 340,
      height: 36,
      draggable: false
    });

 var layer = new Konva.Layer();
 var layer2 = new Konva.Layer();
 var highlayer = new Konva.Layer();

function createGroup(text, row, column) {
    var simpleText = new Konva.Text({
      x: 9,
      y: 9,
      text: text,
      fontSize: 18,
      fontFamily: 'Noto Sans SC',
      fontStyle: 'Bold',
      fill: '#6e6e6e'
    });
    var rect = new Konva.Rect({
      x: 0,
      y: 0,
      width: 36,
      height: 36,
      fill: '#F3F3F3'
    });
  
    var group = new Konva.Group({
      x: (column)*(36+1),
      y: (row)*(36+1)
    });
  group.on('mousedown touchstart', function(){
    //console.log('hhahhaah');
    group.moveTo(highlayer);
    //console.log(group.getAttrs());
    rect.setFill("#ADEBFF");
    var SCALE=1.2;
    group.to(
      {
        duration: 0.5,
        easing:Konva.Easings.ElasticEaseOut,
        scaleX:SCALE,
        scaleY:SCALE,
        offsetX:(1/2)*(SCALE-1)*36/SCALE,
        offsetY:(1/2)*(SCALE-1)*36/SCALE
      }
      );
  }.bind(this));
    group.add(rect);
    group.add(simpleText);
  return group;
}

grid = [
  ['春','花','开','秋','山','灯','哥','山','山','山','山','山','山','山'],
  ['春','花','开','秋','山','灯','哥','山','山','山','山','山','山','山'],
  ['春','花','开','秋','山','灯','哥','山','山','山','山','山','山','山'],
  ['春','花','开','秋','山','灯','哥','山','山','山','山','山','山','山'],
  ['春','花','开','秋','山','灯','哥','山','山','山','山','山','山','山'],
  ['春','花','开','秋','山','灯','哥','山','山','山','山','山','山','山'],
];

for (var i  = 0; i< grid.length; ++i) {
  for (var j = 0; j<grid[i].length; ++j) {
    layer.add(createGroup(grid[i][j],i,j));      
  }
}

for (var j = 0; j<grid[0].length; ++j) {
    layer2.add(createGroup(grid[0][j],0,j));      
  }
 stage.add(layer);
stage.add(highlayer);
stage.on('dragmove dragstart', function() {
  console.log(stage.getAttrs());
  var xx = stage.getAttrs()['x'] || 0;
  var yy = stage.getAttrs()['y'] || 0;
  console.log(xx);
  stage2.offsetX(-xx);
  stage2.draw();
}.bind(this));
stage2.add(layer2);
window.stage = stage;

scripts

<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>

style.css

 body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #fff;
    }