차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- jcontrols_cf35:fills_strokes_and_borders [2016/03/17 12:48]
Comfile Technology [BackColor 속성]
+++ jcontrols_cf35:fills_strokes_and_borders [2016/04/14 09:46] (현재)
@@ 줄 1: / 줄 1: @@
+====== Fills, Strokes, and Borders ======
+대부분의 jControls CF35 콘트롤은 ''Fill'' 속성과 ''Stroke''/''Border'' 속성을 가지고 있습니다. ''Fill'' 은 콘트롤 내부 색상을 결정하는 속성이고, ''Stroke''/''Border'' 은 외곽선에 대한 색상을 결정하는 속성입니다.
+===== type 속성 =====
+jControls CF35 콘트롤의 type 속성은 ''[[#Solid]]'', ''[[#LinearGradient]]'', 그리고 ''[[#RadialGradient]]'' 중 하나를 선택할 수 있습니다.
+==== Solid ====
+''Solid'' ''Type''은 ''Color1'' 속성만 사용가능합니다.
+| {{.:redsolidfill.png?direct&600|}} | {{ .:fillsolidproperties.png?nolink |}} |
+==== LinearGradient ====
+''LinearGradient'' ''Type''은 직선방향으로 점차 색이 변하는 타입입니다. ''Color1''에서 지정한 색, ''Color1Point'' 에서 지정한 위치로 부터 ''Color2''에서 지정한 색과 ''Color2Point''에서 지정한 위치로 색을 서서히 변화시키면서 표현합니다.  ''ScaleGradient'' 는 ''False''로 해두시면 됩니다.
+| {{ .:fillabsolutelineargradient.png?direct&600 |}} | {{ .:fillabsolutelineargradientproperties.png?nolink |}} |
+==== RadialGradient ====
+''RadialGradient'' ''Type''은 원형으로 점차 색이 변하는 타입입니다. ''Color1''에서 지정한 색, ''Color1Point'' 에서 지정한 위치로 부터 ''Color2''에서 지정한 색과 ''Color2Point''에서 지정한 위치로 색을 서서히 변화시키면서 표현합니다.  ''ScaleGradient'' 는 ''False''로 해두시면 됩니다.
+| {{ .:fillabsoluteradialgradient.png?direct&600 |}} | {{ .:fillabsoluteradialgradientproperties.png?nolink |}} |
+===== ScaleGradient 속성 =====
+''ScaleGradient'' 이 ''False''로 되어 있으면, ''Color1Point''와 ''Color2Point''는 좌표로 인식됩니다.
+만약, ''ScaleGradient'' 이 ''true''로 되어 있다면, ''Color1Point'' , ''Color2Point'' 은 퍼센트로 인식됩니다. 콘트롤 전체사이즈를 기준으로  몇 퍼센트의 위치(''Color1Point'')에서 몇 퍼센트의 위치(''Color2Point'')까지 그라데이션 효과를 적용시킬 것인지를 결정하는 것입니다.
+예를들어 ''Color1Point'' 가 50,50 이라면 콘트롤의 Width * 0.5 와 Height * 0.5 위치가 시작지점이 됩니다.
+| {{.:redblueabsolutegradient200x200.png?direct&200|}} | {{ .:fillscalegradienttrueproperties.png?nolink |}} | 이 경우 그라데이션 효과는 ''Color2Point'' (100,100) 에서 지정한 좌표까지만 진행됩니다. |
+| {{.:redbluerelativegradient200x200.png?direct&200|}} | {{ .:fillscalegradientfalseproperties.png?nolink |}} | 이 경우에는 Color2Point가 100,100이므로 (100%,100%)로 인식됩니다. 즉 콘트롤의 전체영역에 그라데이션 효과가 반영됩니다.  |
+===== Noise 속성 =====
+Noise 를 사용해서 그라데이션효과에 나타날 수 있는 밴딩 현상을 최소화 할 수 있습니다.
+| {{.:redblueverticalgradientnonoise.png?direct&600|}} | {{ .:redblueverticalgradientnonoisesettings.png?nolink |}} |
+|  색이 변하는 과정이 부드럽지 않고, 밴딩효과가 나타납니다.  ||
+----
+| {{.:redblueverticalgradientnoise.png?direct&600|}} | {{ .:redblueverticalgradientnoisesettings.png?nolink |}} |
+|  noise를 늘리면 밴딩효과는 줄어듭니다. 부드럽게 색이 변하게 됩니다.  ||
+===== 알파블랜딩과 투명효과 =====
+jControls CF35의 모든 칼라속성에는 ''알파블랜딩, R, G, B'' 숫자 4개로 구성된 칼라코드를 부여할 수 있습니다. 최대치는 255입니다. 알파블랜딩 값이 255이면 불투명한 상태입니다. 0이면 완전 투명입니다. 128이면 50%가 투명합니다. 예를들어 128,255,0,0 으로 지정한다면, 반투명상태의 빨간색입니다.
+{{.:alphatransparency.mp4?426x240|}}
+===== Thickness 속성 =====
+''Stroke''와 ''Border''에는 선의 두께를 나타내는 ''Thickness''속성을 사용할 수 있습니다. 선의 색을 정할때에도 위에서 설명한 type속성 ''[[#Solid]]'', ''[[#LinearGradient]]'', 그리고 ''[[#RadialGradient]]'' 을 모두 사용할 수 있습니다
+|{{ .:strokethickness1.png?nolink |}}|{{ .:strokethickness1properties.png?nolink |}}|
+|{{ .:strokethickness7.png?nolink |}}|{{ .:strokethickness7properties.png?nolink |}}|
+===== BackColor 속성 =====
+배경색을 변경하려면 ''BackColor'' 속성을 수정하시면 됩니다. 기본적으로 투명(Transparent)으로 지정되어 있습니다.
+|{{ .:backcolortransparent.png?nolink |}}|{{ .:backcolortransparentproperties.png?nolink |}}|
+|{{ .:backcolorblue.png?nolink |}}|{{ .backcolorblueproperties.png?nolink |}}|

사용자 도구

사이트 도구

차이

문서 도구