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

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

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

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

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

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

핵심 개념

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

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

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 id="자주-묻는-질문"> 자주 묻는 질문</h3><p> 제공된 스크립트와 관련하여 몇 가지 일반적인 질문이 아래에 다루어집니다.</p><h4 id="code-cc-code-함수는-무엇입니까"> <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];
}

마스크가 이미 클립을 클립하는 경우 clip-path 사용하는 이유는 무엇입니까?

마스크 만 사용하면 뇌졸중 정렬 및 호버 가능한 영역에 문제가 발생합니다. clip-path 이러한 문제를 해결합니다.

국경 값과 함께 @property 사용하는 이유는 무엇입니까?

@property 사용자 정의 속성을 등록하여 유형을 정의합니다 (이 경우,<length></length> ), 브라우저 인식을 활성화하고 문자열이 아니라 유효한 유형으로 처리합니다. 이것은 다양한 길이 단위를 허용합니다.

--path 변수는 어떻습니까?

--path 변수는 @property 에 복잡한 유형을 등록하는 데 제한이 있기 때문에 문자열로 처리됩니다. cc() 함수는 문자열-픽셀 변환을 처리합니다.

우리는 돌진을 가질 수 있습니까?

예, ctx.setLineDash() 사용합니다. 추가 변수는 대시 패턴을 제어합니다.

대시 변수에 @property 사용하지 않는 이유는 무엇입니까?

기술적으로 가능하지만 paint() 내에서 값을 검색하는 것은 문제가되는 것으로 판명되었습니다. 지금은 --dash 변수가 문자열로 취급됩니다.

실제 응용 프로그램

몇 가지 사용 사례는 다각형 테두리 기술을 보여줍니다.

• 버튼 : 호버 효과로 사용자 정의 모양의 버튼을 만듭니다.
• 빵 부스러기 : Breadcrumb Navigation을 단순화하십시오.
• 카드 공개 애니메이션 : 호버 효과 또는 공개 애니메이션을위한 애니메이션 테두리 두께.
• 콜 아웃 및 음성 버블 : 복잡한 모양에 테두리를 쉽게 추가하십시오.
• 애니메이션 대시 : setLineDash() 및 lineDashOffset 사용하여 다양한 대시 애니메이션을 만듭니다.

이 기사는 CSS Paint API를 사용하여 다각형 테두리 생성에 대한 포괄적 인 안내서를 제공하여 모양 스타일의 유연성과 효율성을 제공합니다.

위 내용은 CSS 페인트 API : 다각형 테두리 탐색의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!