Mac에서 Divvy를 사용하는 동안 16:9 해상도를 달성하는 방법

비디오를 녹화하려고 했는데 몇 픽셀이 떨어져 있는 것을 알아차린 적이 있습니까? 좋은 품질의 비디오를 제작할 수 있도록 수정하겠습니다!

쉬운 솔루션

그래서 이 미친 연습을 시작하기 전에 비디오를 녹화할 때 가장 간단한 트릭 중 하나를 호출하고 싶습니다. MacOS에서는 메뉴바를 숨기기만 하면 됩니다.

이게 아직 개발자 포스트인가요?

저는 개발자로서 대부분 멋진 사이드 프로젝트를 찾고 있습니다. Builder에서 Remix와 파트너 관계를 맺을 방법을 찾고 있었기 때문에 저는 Remix를 사용해 볼 구실을 찾고 있었습니다.

내가 하고 싶었던 것은 Builder.io 및 CodingCat.dev 모두에서 녹화하기 위해 내 화면을 올바르게 캡처할 수 있도록 Divvy의 여백을 설정할 항목을 계산하는 간단한 도구를 만드는 것이었습니다.

나는 그것으로 약간의 재미를 원했고 메뉴 모음 세트, 여백, Divvy 내에서 사용 중인 상자의 수Cloudinary's React SDK 및 오버레이가 있는 다운로드 가능한 배경을 컴퓨터에 추가했습니다.

Dont care about the math? Cool I don't really either but I needed to understand it to write this purrfect [Divvy Calculator](https://divvy.codingcat.dev/). See something broken, PR's more than welcome. [GitHub Repo](https://github.com/CodingCatDev/divvy-screen-size)

아래의 Cloudinary 변환 코드의 빠른 예입니다.

// Apply the transformation.
  myImage
    // Crop the image.
    .resize(thumbnail().width(reducedWidth).height(reducedHeight))
    //Menu Bar
    .overlay(
      source(
        image(`1`).transformation(
          new Transformation()
            .resize(
              fill()
                .width(Math.round(reducedWidth))
                .height(Math.round(menuBarHeight))
            )
            .effect(new ColorizeEffectAction().color("#391").level("colorize"))
        )
      ).position(new Position().gravity(compass(northWest())))
    )
    //Margin left
    .overlay(
      source(
        image(`1`).transformation(
          new Transformation()
            .resize(
              fill()
                .width(Math.round(reducedScreenMargin / 2))
                .height(Math.round(reducedScreenHeight))
            )
            .effect(new ColorizeEffectAction().color("red").level("colorize"))
        )
      ).position(
        new Position()
          .gravity(compass(northWest()))
          .offsetY(reducedMenuBarHeight)
      )
    )
    .overlay(
      source(
        image(`1`).transformation(
          new Transformation()
            .resize(
              fill()
                .width(Math.round(reducedScreenMargin / 2))
                .height(Math.round(reducedScreenHeight))
            )
            .effect(new ColorizeEffectAction().color("red").level("colorize"))
        )
      ).position(
        new Position()
          .gravity(compass(northEast()))
          .offsetY(reducedMenuBarHeight)
      )
    );

MacOS 및 메뉴 표시줄

Mac에서 디스플레이를 사용하는 경우 창은 모두 상단의 메뉴 표시줄 아래에 있습니다. 따라서 녹화 중인 아름다운 4K 모니터는 일반적으로 16:9(9/16)라고도 하는 완벽한 56.25% 비율(2160/3840)로 표시됩니다.

따라서 화면이 4K 3840px x 2160px이고 메뉴 높이가 24px인 경우 실제 사용 가능한 높이는 2160px - 24px => 2136px입니다. 물론 2136/3840으로 나누면 3840px x 2136px가 됩니다.

Divvy 창 관리자 작동 방식

Divvy을 사용하면 모니터를 아래 표시된 행별로 섹션 열로 나눌 수 있습니다.



이것은 놀랍도록 간단하지만 매우 강력한 도구입니다. 화면을 1x1에서 10x10 블록까지 무엇이든 나눌 수 있습니다. 더 많은 기능이 있습니다. 가능한 기능을 더 보려면 아래 비디오를 확인하십시오.

무슨 일이야

따라서 Divvy 창 관리자를 사용하고 창을 4개의 동일한 위치에 배치하는 경우 이것이 실제로 의미하는 바는 비율이 55.625%에 가까워진다는 것입니다. .625라는 작은 차이가 별 것 아닌 것처럼 보일 수 있지만 4K 화면 캡처를 제작할 때 40개 이상의 픽셀이 실제로 나타납니다(저를 믿으세요)!