javascript - 调整大小后如何保持 Konvas 图层居中？

Question

所以我使用 Konvajs 来绘制线段，只有垂直和水平。我的问题如下，当我开始调试时，如果窗口很小然后我单击最大化，图层将保持与小时相同的大小。前任：

这里是创建 Konva 的 Javascript 文件：

function setUpDesignMap(){
var width = $('#designContainer').width();
var height = $('#designContainer').height();
var blockSnapSize = gridSize;
var isDrawing = false;
var drawShape = null;

designStage = new Konva.Stage({
    container: 'designContainer',
    width: width,
    height: height,
    draggable: true,
    name:'designStage'
    // dragBoundFunc: function(pos) {
    //     var newY = pos.y < 0 ? 0 : pos.y;
    //     var newX = pos.x < 0 ? 0 : pos.x;
    //     return {
    //         x: newX,
    //         y: newY
    //     };
    // }
});
/*Set up grid*/
var gridLayer = new Konva.Layer();
var tipLayer = new Konva.Layer();
drawLayer = new Konva.Layer();
segGrp = new Konva.Group({name:'segments'});


/* draw grid */
for (var i = 0; i < 240; i++) {
    gridLayer.add(new Konva.Line({
        points: [Math.round(i * blockSnapSize), 0, Math.round(i * blockSnapSize), 120*blockSnapSize],
        stroke: '#888',
        strokeWidth: 0.5,
    }));
}
gridLayer.add(new Konva.Line({points: [0,0,10,10]}));
for (var j = 0; j < 120; j++) {
    gridLayer.add(new Konva.Line({
        points: [0, Math.round(j * blockSnapSize), 240*blockSnapSize, Math.round(j * blockSnapSize)],
        stroke: '#888',
        strokeWidth: 0.5,
    }));
}
/* Stage initial position*/
zoomVars_design = {scale: 1, factor: 1.1, origin: {x:-100*gridSize,y:-50*gridSize}};
designStage.position(zoomVars_design.origin);
designStage.scale({ x: 1, y: 1 });

/*Set up mouse tip*/
var mouseTip = new Konva.Rect({
    width: 6,
    height: 6,
    opacity:0,
    fill: '#FFCC00',
    stroke: '#FFCC00'
});
tipLayer.add(mouseTip);
/* Set up length indicator */
var lenShape = new Konva.Line({
    points:[],
    opacity: 1,
    strokeWidth: 1,
    stroke: '#000',
    dash:[7,5]
});
gridLayer.add(lenShape);
/* Set up length text*/
var lenText = new Konva.Text({
    align: 'center',
    verticalAlign: 'middle',
    fontSize: 12
});
gridLayer.add(lenText);

var lenSide = new Konva.Line({
    points:[],
    opacity: 1,
    strokeWidth: 1,
    stroke: '#000',
    dash:[7,5]
});
gridLayer.add(lenSide);

/*Mouse handlers*/
//remove default behaviour for the container
$("#designContainer").on('mousedown', function(e){
    e.preventDefault();
});
$("#designContainer").on('contextmenu', function(e){
    e.preventDefault();
});


//mouse handlers on stage
designStage.on('contentMousedown', function (e) {
    if(e.evt.button == 0){
        designStage.draggable(false);
    }
    else{
        designStage.draggable(true);            
        return;
    }
    if(mouseMode == 0){ //draw mode
        var startPoint = {x:(mouseTip.attrs.x+3), y:(mouseTip.attrs.y+3)};
        if(!isDrawing){
            if(!isIntersection(startPoint)){ //cannot be intersection to avoid crosses

                //check if there's an intersection on the begining
                if(isCorner(startPoint)){
                    intersectingSeg = false;
                    intersectingCorner = true;
                    console.log('intersectingSeg = false')
                }
                else{
                    //check if its on an existing segment
                    var isonseg = isOnSegment(startPoint);
                    if(isonseg.b){
                        //validate resulting segments length
                        var intercected = getSegmentsArray(isonseg.d)[isonseg.i];
                        var res = breakSegAtIntersection(startPoint,intercected);
                        if(isValidLength(res[0].start,res[0].end) && isValidLength(res[1].start,res[1].end)){
                            intersectingSeg = true;
                            intersectingCorner = false;
                            console.log('>>>>>>>Intersecting Segment at start')
                        }
                        else{
                            consoleAdd('Resulting segments are too small to you');
                            return;
                        }
                    }
                }
                //start drawing
                drawShape = new Konva.Line({
                    points: [startPoint.x, startPoint.y],
                    strokeWidth: 15,
                    stroke: 'black',
                    opacity: 0.5,
                    dir:'h'
                });
                drawShape.on('mouseover', function (e) {
                    if(mouseMode == 1){
                        this.stroke('#031C4D');
                        drawLayer.draw();
                    }
                });
                drawShape.on('mouseout', function (e) {
                    if(mouseMode == 1){
                        this.stroke('black');
                        drawLayer.draw();
                    }                       
                });
                drawShape.on('mouseup', function (e) {
                    if(mouseMode == 1){
                        this.stroke('#092C70');
                        drawLayer.draw();
                    }
                });
                segGrp.add(drawShape);
                drawLayer.add(segGrp);
                drawLayer.draw();
                isDrawing = true;
            }
            else{
                consoleAdd('Cannot start on an intersection');
            }
            gridLayer.draw();
        }
    }
});

所以我希望这个层不要那么小，总是重新安装。谢谢大家的关注！

标签： javascriptcsskonvajs

Answer 1

当容器元素的大小发生变化时，您需要手动调整舞台的大小。

window.addEventListener('resize', () => {
  var width = $('#designContainer').width();
  var height = $('#designContainer').height();
  designStage.width(width);
  designStage.height(height);
})

您可能还需要将比例应用于舞台。

看看相关的演示：https ://konvajs.org/docs/sandbox/Responsive_Canvas.html