(부분) 리버스 엔지니어링 Neumorphism.io

최근에 저는 제 프로젝트에서 많이 사용했습니다neumorphism.io. 저는 단추의 부드러움과 부드러움을 정말 좋아합니다.
그러나 내가 n번째로 나의 색깔을 사이트에 붙였을 때, 나는 그것이 어떻게 작동하는지 알고 싶었다.제가 직접 이 음영 색깔을 계산해도 될까요?
물론 첫 번째 단계는 무작위 색상을 삽입하여 음영의 16진 코드를 얻은 다음 RGB 숫자를 검사하는 것이다.나는 colorhexa로 이것을 한다.
이름
R
G
B
엉겅퀴
216
191
216
엉겅퀴의 창백한 그늘
248
220
248
엉겅퀴의 그림자
184
162
184
-
-
-
-
파우더 블루
176
224
230
분홍색의 창백한 그림자
202
255
255
분홍색의 그림자
150
190
196
-
-
-
-
페루
205
133
63
페루의 창백한 그림자
236
153
72
페루의 그림자
174
113
54
네, 인코딩을 배웠어요. 이렇게 하면 하루 종일 타자하는 것을 피할 수 있어요...😭
어쨌든, 지금 우리는 이 숫자들이 생겼으니, 우리는 그것들이 어떻게 변이했는지 시험해 볼 수 있다.
이름
R 변경
G 변화
B변경
엉겅퀴재
+32
+29
+32
엉겅퀴
-32
-29
-32
-
-
-
-
연남색 가루
+26
+31
+25
파우더 블루 - 딥
-26
-34
-37
-
-
-
-
옅은 파란색 가루에 대해 녹색과 파란색의 최대치는 255이기 때문에 우리는 이 두 숫자가 모두 32 또는 더 크다고 가정할 수 있습니다.
나는 페루를 위해 더 많은 수학을 하지 않았다. 왜냐하면 나는 싫증이 났기 때문이다.그러나 우리가 본 것은 가설 변수x이다. 그 중에서 x는 R, G, B의 변화량이다. 그러면 연한 색의 음영은 r + x, g + x, b + x이고 짙은 색의 음영은 r - x, g - x, b - x이다.x도 26에서 37 사이인 것 같다. - 색깔이 더 많으면 20에서 30 사이, 심지어 더 클 수도 있다고 가정할 수 있다.
이 점에서 나는 한 걸음 후퇴했다.이 프로젝트는 나의 진도 노드처럼 길고 코드가 밀집되고 복잡하지 않은 오늘의 빠른 전단 퍼즐이어야 한다.js 응용 프로그램.rgb값마다 25를 더하거나 빼면 충분합니다.

단지 재미를 위해서, 나는neumorphism 뒤에서 실행되는 코드를 검사했다.io.나는 짧은 시간 안에 유사한 함수를 가진 어떤 것도 쓸 수 없다.이제 나는 사용자가 제공한 RGB 값에 25를 더하고 빼는 원형을 만들 것이다.
16진수와 RGB 간의 변환에 대해 자세히 설명합니다.
현재 구조는 다음과 같이 보인다.

입력 3개-R, G 및 B

onsubmit, R, G, B를 합법적인 CSS 문자열로 조합
템플릿 텍스트 사용(예: background: rgb(${r},${g}, ${b})

숫자에서 25를 빼고 양으로 설정
그림자, 그리고 25를 추가하고 음영 그림자로 설정합니다.

나는 약 30분 안에 효과적인 시범을 보일 수 있다.
멋있죠?괜찮아 보여!나는 앞으로 틀림없이 그것을 나의 프로젝트에 사용할 것이다.
다음 단계: 16진 코드도 사용합니다.그러나 음영 색을 계산하기 위해서는 16진 코드로 변환해야 합니다!이것은 정규 표현식을 어떻게 읽는지 배우는 데 유용한 부분이다.
나는 이것site에서 이 스크립트를 찾았다.

function HEXtoRGB(hex) {
    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
        return r + r + g + g + b + b;
    });
    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
    } : null;
}

하지만나는 정말 그것이 어떻게 일하는지 모르겠다.나는 코드 복사를 좋아하지 않는다.무서워 보여요.그럼 이 함수를 분해하고 직접 만들어봅시다!

16진수 색상 구조:

8adaff<- 16진수 색상의 예입니다.16진수 색상은

옵션#

자모 또는
숫자 또는 둘 다

선택 가능한 해시와 일치하기 위해서 우리는 사용할 수 있다^#?

^ 태그 문자열의 시작

# 일치#(duh)

? 정규 표현식ese에서 "옵션"을 표시합니다.

이제 나머지 6자를 분리해서 기수 16에서 기수 10으로 바꿔야 합니다.

우리는 이렇게 표를 검증할 수 있다.

양식 입력에서 검색# - 있는 경우
기능, 전면에 없음 #.

(0,2), (2,4) 및 (4,6)에서 새 문자열 슬라이스

#이 없으면 슬라이스를 시작합니다.

그러나 더 우아한 해결 방안은 내가 발견한 복잡한 코드 부분처럼 정규 표현식을 사용하는 것이다.
각 16진수와 일치하기 위해서 우리는 이렇게 할 수 있다.a-f - 16진법은 a에서 f까지의 자모만 사용합니다. 완전한 16진수 줄은 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, B, C, D, E, f입니다.\d - 숫자 일치[] - 괄호는 한 문자만 일치합니다.{2} - 두 번 일치 - 괄호 뒤에 숫자나 문자에 일치하는 두 문자를 배치합니다.() - 나는 오늘 그들이 짝짓기 집단이라는 것을 알게 되었다.잠시 후에 나는 그것들의 기능을 설명할 것이다.
이제 일치 #8adaff 를 위해 이 정규 표현식을 사용할 수 있습니다.^#?([a-f\d]{2}){3}
차갑다현재 우리는 정규 표현식 방법match()을 사용하여 숫자를 처리할 수 있다.
또는우리 괜찮아요?

이것은 매우 나쁘다. - 우리가 모든 문자열과 일치하고 마지막 두 문자만 일치하는 것 같다.우리는 어떻게 그것을 복구합니까?
해결 방안은 사실상 정규 표현식과 유사한 것을 작성하는 것이다^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})
대체 사용{3}:

이것이 바로 () 정합 그룹의 유래이다. 세 개의 정합 그룹을 생성하고, 정규 표현식 정합 방법을 통해 세 개의 두 문자열을 출력한다. 우리의 16진수이다.
최종 결과를 정리할 때, 나는 또 다른 오류를 발견했다. 예를 들어 i 를 정규 표현식의 끝에 놓았다./^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})/i
그래서 민감하지 않은 상황에서 사례와 일치한다.
완벽했어이제 우리는 숫자를 10을 기수로 해석하기만 하면 시작할 수 있다.

//assuming hex came from the form:
var num = hex.match(regex)
var r = parseInt(num[1], 16)
var g = parseInt(num[2], 16)
var b = parseInt(num[3], 16)

우리는parseInt를 사용했기 때문에 이 값들은 자동으로 숫자로 변할 것이다. 우리는 더 이상 걱정할 필요가 없다.
만약 우리가 16진 코드를 출력하려고 한다면, 결과적으로parseInt-you have to use toString()를 사용할 수 없다
어쨌든 Glitch에서 관리되는 최종 제품입니다.

이 프로그램은 255보다 큰 숫자가 필터되지 않기 때문에 세 문자의 16진수로 변할 수 있습니다.이를 최적화하려면 255보다 크거나 0보다 작은 검증 변경 변수를 추가할 수 있습니다

그 밖에 수조와 방법(예를 들어)을 사용하면 성명 변수의 블록을 더욱 최적화시킬 수 있다.지도forEach

하지만 몇 시간 안에 완성되는 프로젝트에 있어서는 그리 나쁘지 않다

생각?생각원한 메일?댓글을 남겨주세요