고정 된 높이/너비의 컨테이너 안에 my FabricJS 캔버스가 있습니다. 측면에는 캔버스 크기를 다양한 사전 설정으로 변경하는 드롭 다운이 있습니다. 컨테이너보다 크고 넓은 크기를 선택할 때마다 자동으로 축소됩니다. 예를 들어, 컨테이너 div가 800x600이고 캔버스 크기를 1024x768로 선택하면 전체 캔버스가 여전히 보이도록 축소하려고합니다. 반대로 작은 크기 (예 : 200x200)를 선택하면 최대 100 %까지 확대하고 싶습니다.FabricJS Scale/Zoom 캔버스를 컨테이너에 맞추기
확대/축소보기의 예는 this이지만 아무리 축소해도 캔바스 크기는 그대로 유지됩니다.
은 여기에서 볼 수 있듯이, 얇은 빨간색 테두리 영역이 캔버스 컨테이너입니다. 흰색 상자가 캔버스입니다.
이 작업을 수행하려면 canvas.setDimensions 함수를 사용할 수 있습니다. 두 개의 인수를 전달합니다. 첫 번째는 캔버스를 변경할 높이와 너비를 지정하는 객체이고 두 번째는 css, 캔버스의 실제 크기 또는 둘 다를 변경할지 여부를 나타냅니다.
예를 들어, canvas.setDimensions({width: 750, height: 750}, {backstoreOnly: true}은 디스플레이에 관계없이 캔버스의 실제 크기를 750x750으로 설정합니다.
canvas.setDimensions({width: '750px', height: '750px'}, {cssOnly: true})은 실제 크기에 관계없이 캔버스의 표시 크기를 750x750으로 설정합니다.
CSS 또는 백 스토어 뒤에 너비 또는 높이가 px이 필요한지 100 % 확신 할 수는 없지만 확인하는 것은 매우 간단합니다. 또한 두 번째 매개 변수에 인수가 전달되지 않으면 둘 다 변경됩니다.