Question

请帮助我，如何在调整画布大小的同时保持内容大小？
请参见以下代码：
https://jsfiddle.net/thobn24h/79Ls6fry/7/
当我调整窗口大小时，“矩形”和“文本”会缩放并具有别名。如何使它们与原始大小相同且没有别名？
（顺便说一下，为什么第一次画布大小不等于div大小？）

谢谢！

<style>
        #canvasContainer {
            width: 100%;
            height: 100vh;
            background-color: gray;
        }
    </style>

<div id="canvasContainer">
        <canvas id="editorCanvas"></canvas>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>

    <script>
        $(function() {

            var canvasObject = document.getElementById("editorCanvas");
            // set canvas equal size with div
            $(canvasObject).width($("#canvasContainer").width());
            $(canvasObject).height($("#canvasContainer").height());

            console.log("width: " + $(canvasObject).width());
            console.log("height: " + $(canvasObject).height());

            canvas = new fabric.Canvas('editorCanvas', {
                backgroundColor: 'white',
                selectionColor: 'blue',
                selectionLineWidth: 2
            });

            // create a rectangle object
            var rect = new fabric.Rect({
              left: 10,
              top: 10,
              fill: 'red',
              width: 150,
              height: 150
            });

            rect.set({
                transparentCorners: false,
                rotatingPointOffset: 40,
                cornerColor: 'black',
                cornerStrokeColor: 'black',
                borderColor: 'black',
                cornerSize: 12,
                padding: 10,
                cornerStyle: 'circle',
                borderDashArray: [3, 3]
              });

            // "add" rectangle onto canvas
            canvas.add(rect);

            var text = new fabric.Text('hello world', { left: 10, top: 10 });
            canvas.add(text);

            // Tracking resize windows event
            window.addEventListener('resize', resizeCanvas, false);

        });

        function resizeCanvas() {

            var canvasObject = document.getElementById("editorCanvas");

            $(canvasObject).width($("#canvasContainer").width());
            $(canvasObject).height($("#canvasContainer").height());

            console.log("width: " + $(canvasObject).width());
            console.log("height: " + $(canvasObject).height());

        }

Answer 1

您需要使用canvas#setDimensions来设置宽度/高度。

演示

canvas = new fabric.Canvas('editorCanvas', {
  backgroundColor: 'white',
  selectionColor: 'blue',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height:$("#canvasContainer").height()
});

// create a rectangle object
var rect = new fabric.Rect({
  left: 10,
  top: 10,
  fill: 'red',
  width: 150,
  height: 150
});

rect.set({
  transparentCorners: false,
  rotatingPointOffset: 40,
  cornerColor: 'black',
  cornerStrokeColor: 'black',
  borderColor: 'black',
  cornerSize: 12,
  padding: 10,
  cornerStyle: 'circle',
  borderDashArray: [3, 3]
});

// "add" rectangle onto canvas
canvas.add(rect);

var text = new fabric.Text('hello world', {
  left: 10,
  top: 10
});
canvas.add(text);

// Tracking resize windows event
window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
  canvas.setDimensions({
    width: $("#canvasContainer").width(),
    height: $("#canvasContainer").height()
  })
}

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>

使用Fabric.js时如何在调整画布元素大小时防止内容缩放

1 个答案: