Question

我正在使用KineticJs库在canvas中开发一个设计器工具。一切正常，除了当我按放大/缩小并将舞台上的变焦设置为2x时，我需要垂直和水平滚动条。我试过给阶段本身和容器提供css溢出但是不起作用。我怎么能管理呢？

Answer 1

你走在正确的轨道上......

使舞台画布大于包含舞台的div。然后设置overflow：隐藏在容器上。

如果您想允许通过滚动条进行平移，那么您的舞台必须大于包含视口，否则您将“＃34;用尽画布＆＃34;。

＆＃13;

                Workbook w = Workbook.getWorkbook(inputWorkbook);                      
                Sheet sheet = w.getSheet(0);
                nom = sheet.getRows();
                String[][] SheetArray = new String [2][nom];  
                   // change the first number to the number of columns you want, 
                   // or pick up the number same as you did with rows   


                Cell cell;           

                  // GETS DATA FROM SHEET AND RUNS THROUGH WHOLE LOOP BELOW FOR EACH REFERENCE            
                 for(int j =0;j<sheet.getRows();j++) // cycles through rows and loads into 2d array
                    { // start 6
                     cell = sheet.getCell(0, j); <- your column number here
                     cellcont = cell.getContents();                        
                      SheetArray[0][j] = cellcont;

                       // repeat the above block for each column you want

                        } // end 6

＆＃13;

var stage = new Kinetic.Stage({
  container: 'container',
  width: 740,
  height: 463
});
var layer = new Kinetic.Layer();
stage.add(layer);

var image = new Image();
image.onload = function () {

  var kImg = new Kinetic.Image({
    image: image,
    id: 99,
    x: 0,
    y: 0,
    width: 740,
    height: 463,
    draggable: false
  });
  layer.add(kImg);
  layer.draw();
}
image.src = "http://www.mrwallpaper.com/wallpapers/Colorful-New-York-City.jpg";

＆＃13;

#wrapper {
    overflow:scroll;
    width:300px;
    height:350px;
    border:2px solid blue;
}

＆＃13;

如何在缩放画布阶段时滚动

1 个答案: