Question

我的自动调整画布不适用于 kineticjs ，控制台说我没有定义canvas.width和canvas.height。

任何人都可以帮助我。

谢谢。

放下功能和通话。

function resize() {
    console.log("ddddddddddddd");
//stage.setWidth((window.innerWidth / 100) * 80);

    var canvas = document.getElementById('Contenedor');
    console.log(canvas, canvas.height, canvas.width);
    if(window.innerWidth < 1280){
       var canvasRatio = canvas.height / canvas.width;
       console.log(canvasRatio);
       var windowRatio = window.innerHeight / window.innerWidth;
       console.log(windowRatio);
       var width;
       var height;

       if (windowRatio < canvasRatio) {
           height = window.innerHeight;
           width = height / canvasRatio;
       } else {
           width = window.innerWidth;
           height = width * canvasRatio;
       }

       canvas.style.width = (parseFloat(width)*0.75) + 'px';
       canvas.style.height = (parseFloat(height)*0.75) + 'px';
   }else{
    canvas.style.width=987+'px';
    canvas.style.height=544+'px';
   }    
};
window.addEventListener('resize', resize, false);

Answer 1

您可以做的是设置画布相对于宽度的高度。并使用stage.setScale（）和stage.setSize（）动态更改阶段的大小

function resize() {
        var canvasWidthRatio = 0.6;        // canvas width to viewport width ratio
        var viewPortWidth = window.innerWidth;
        var canvasWidth = viewPortWidth * canvasWidthRatio;
        var canvasHeight = canvasWidth * 0.6,
            scale = stage.getScale(),
            stageWidth = stage.getWidth(),
            stageHeight = stage.getHeight(),
            scaleFactor = Math.min(canvasWidth / stageWidth, canvasHeight / stageHeight),
            newScale = scale * scaleFactor;
        stage.setScale(newScale);
        stage.setSize(canvasWidth, canvasHeight);
        stage.draw();
}
window.addEventListener('resize', resize, false);

Answer 2

我认为kineticjs设置画布尺寸。

设置舞台宽度和高度，不要直接触摸画布。

Answer 3

您好，对不起我的英文不好，也谢谢您的帮助。我使用VijayB的代码，但是使用他的代码我遇到了将对象比例与浮点数相乘的问题。我发现了一些变化，对我而言正在发挥作用。

我把代码放在有自己问题的人身上。

function resize() {
    var __canvasWidthRatio = 0.6;    
    console.log( __canvasWidthRatio) ;  // canvas width to viewport width ratio
    var __viewPortWidth = window.innerWidth;
    console.log(window.innerWidth);
    var __canvasWidth = __viewPortWidth * __canvasWidthRatio;
    console.log(__canvasWidth);
    var aspec = 769 / 544;
    var __canvasHeight =  aspec *__canvasWidth * __canvasWidthRatio;
    var     __scale = ui.stage.getScale();
    var     __stageWidth = ui.stage.getWidth();
    var     __stageHeight = ui.stage.getHeight();
    var     __scaleFactor = Math.min( __canvasWidth /  __stageWidth,  __canvasHeight /  __stageHeight);
    stage.escala=  __scale.x *__scaleFactor;
    ui.scale=__scale.x *__scaleFactor;
    stage.setScale(stage.escala,stage.escala);
    stage.setSize(__canvasWidth, __canvasHeight);
    stage.draw();
}
window.addEventListener('resize', resize, false);

Kinetic Js自动调整画布大小

3 个答案: