CSS 페인트 API : 다각형 테두리 탐색-CSS 튜토리얼-php.cn

CSS 페인트 API : 다각형 테두리 탐색

Joseph Gordon-Levitt

풀어 주다： 2025-03-20 09:47:10

원래의

541명이 탐색했습니다.

CSS 페인트 API : 다각형 테두리 탐색

clip-path 로 복잡한 모양을 만드는 것은 간단하지만 테두리를 추가하는 것은 지속적인 도전입니다. CSS에는 강력한 솔루션이 부족하여 종종 번거로운 해결 방법이 필요합니다. 이 기사에서는 CSS 페인트 API를 사용한 솔루션을 보여줍니다.

이 CSS 페인트 API 탐색 시리즈는 계속됩니다.

1 부 : 이미지 조각화 효과
2 부 : Blob Animation
3 부 : 다각형 국경 (현재 기사)
파트 4 : 둥근 모양

이 기사는 다각형 경계 생성에 대해 자세히 설명합니다. 이 기술은 현재 크롬 기반 브라우저 (크롬, 에지, 오페라)에서만 지원됩니다. 최신 호환성 정보를 확인하십시오.

코드는 간결하고 적응성이 유지되며 모양을 수정하기 위해 약간의 변수 조정 만 필요합니다.

핵심 개념

다각형 테두리는 clip-path 와 페인트 API와 생성 된 사용자 정의 마스크를 결합하여 달성됩니다.

표준 사각형으로 시작하십시오.
clip-path 적용하여 다각형으로 만들어냅니다.
다각형 테두리를 만들려면 사용자 정의 마스크를 적용하십시오.

CSS 구조

clip-path 단계의 CSS는 다음과 같습니다.

 .상자 {
  -경로 : 50% 0,100% 100%, 0 100%;

  너비 : 200px;
  높이 : 200px;
  배경 : 빨간색;
  디스플레이 : 인라인 블록;
  클립 경로 : 다각형 (var (-경로));
}

로그인 후 복사

핵심은 CSS 변수 --path 입니다. clip-path 와 마스크는이 변수를 일관된 매개 변수에 사용합니다.

전체 CSS 코드는 다음과 같습니다.

 .상자 {
  -경로 : 50% 0,100% 100%, 0 100%;
  -국경 : 5px;

  너비 : 200px;
  높이 : 200px;
  배경 : 빨간색;
  디스플레이 : 인라인 블록;
  클립 경로 : 다각형 (var (-경로));
  -webkit-mask : 페인트 (다각형 국경);
}

로그인 후 복사

clip-path 외에도 사용자 정의 마스크가 적용되며 --border 국경은 테두리 두께를 제어합니다. CSS는 단순하고 일반적인 상태로 유지되어 페인트 API의 사용 편의성을 강조합니다.

JavaScript 구현

페인트 API 구조를 더 잘 이해하려면이 시리즈의 1 부를 참조하십시오.

paint() 함수의 JavaScript 코드 :

 const points = properties.get ( '-path'). toString (). split ( ',');
const b = parsefloat (properties.get ( '-border'). value);
const w = size.width;
const h = size.height;

const cc = function (x, y) {
  // ...
}

var p = points [0] .trim (). split ( "");
p = cc (p [0], p [1]);

ctx.beginpath ();
ctx.moveto (p [0], p [1]);
for (var i = 1; i <points.length i p="points" .trim split ctx.lineto ctx.closepath ctx.linewidth="2" b ctx.strokestyle="'black';" ctx.stroke><p> 코드는 <code>--path</code> 변수를 읽고 포인트 배열로 변환 한 다음 <code>moveTo</code> 와 <code>lineTo</code> 사용하여 다각형을 그립니다. 이 다각형은 <code>clip-path</code> 다각형을 반영합니다. 스트로크는 국경을 만듭니다. 모양의 채우기는 투명합니다.</p><p> 경로와 두께를 수정하면 다양한 다각형 테두리가 가능합니다. 그라디언트 및 이미지는 CSS <code>background</code> 속성을 사용하여 단색을 대체 할 수 있습니다.</p><p> 컨텐츠를 통합하려면 클리핑을 방지하려면 의사 요소가 필요합니다. 마스크 속성은 의사 요소로 이동하는 반면 <code>clip-path</code> 기본 요소에 남아 있습니다.</p><h3> 자주 묻는 질문</h3><p> 제공된 스크립트와 관련하여 몇 가지 일반적인 질문이 아래에 다루어집니다.</p><h4> <code>cc()</code> 함수는 무엇입니까?</h4><p> 이 함수는 포인트 좌표 (백분율 또는 픽셀 값)를 캔버스 요소 내에서 사용할 수있는 픽셀 값으로 변환합니다.</p><pre class="brush:php;toolbar:false"> const cc = function (x, y) {
  var fx = 0, fy = 0;
  if (x.indexof ( '%')> -1) {
    fx = (parsefloat (x)/100)*w;
  } else if (x.indexof ( 'px')> -1) {
    fx = parsefloat (x);
  }
  if (y.indexof ( '%')> -1) {
     fy = (parsefloat (y)/100)*h;
  } else if (y.indexof ( 'px')> -1) {
    fy = parsefloat (y);
  }
  반환 [fx, fy];
}

로그인 후 복사