개발/WPF2018. 4. 3. 17:31

LinearGradientBrush로 이동하는 두 점 사이에 선 그리기

WPF에서 점1에서 점2까지 그라데이션으로 선을 그리는 방법은 간단하다.

문제는 이 두 점이 계속 바뀌거나 움직이는 경우, 그라데이션이 제대로 먹지 않는다는 점이다. 그라데이션 방향이 뒤집히거나 시작과 끝 색이 같아져버리는 경우도 있다.

말 그대로 StartPoint에서 EndPoint방향으로 선형적으로 그라데이션을 주기 때문에 이 두 포인트가 어긋나면 이상한 그라데이션이 생긴다.


잘못된 예제:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<Grid>
    <Canvas>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="500" Y2="500">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="CYan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="250" Y2="500">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="CYan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="0" Y2="500">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="CYan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="0" Y2="250">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="CYan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="0" Y2="0">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="CYan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="250" Y2="0">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="CYan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="500" Y2="0">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="CYan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="500" Y2="250">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="CYan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
    </Canvas>
</Grid>

결과:

* 실제 이동시키지는 않고 가운데부터 팔방으로 선을 그려보았다.


알고보면 LinearGradientBrush는 선이 아니라 영역(예를 들어 Rectangle)을 그리는데 쓰는거라 선 그리는데 사용하기 애매하다. 어쨌건 다른 좋은 방법이 없기 때문에 만약 이런 식으로 선을 그리고 싶다면 StartPoint, EndPoint도 같이 바꿔줘야 한다.


올바른 예제:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<Grid>
    <Canvas>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="500" Y2="500">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Cyan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="250" Y2="500">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Cyan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="0" Y2="500">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="1,0" EndPoint="0,1">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Cyan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="0" Y2="250">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="1,0.5" EndPoint="0,0.5">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Cyan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="0" Y2="0">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="1,1" EndPoint="0,0">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Cyan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="250" Y2="0">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,0">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Cyan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="500" Y2="0">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,1" EndPoint="1,0">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Cyan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
        <Line StrokeThickness="20" X1="250" Y1="250" X2="500" Y2="250">
            <Line.Stroke>
                <LinearGradientBrush StartPoint="0,0.5" EndPoint="1,0.5">
                    <GradientStop Color="Red" Offset="0"/>
                    <GradientStop Color="Cyan" Offset="1"/>
                </LinearGradientBrush>
            </Line.Stroke>
        </Line>
    </Canvas>
</Grid>

결과:

* 이것이 원하던 형태의 결과이다. 가운데부터 팔방으로 그라데이션이 생긴다.

만약 Line의 X1, Y1, X2, Y2를 바인딩 했다면 StartPoint, EndPoint도 바인딩하는 것이 좋다.

예제:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
public Point LineGradientStartPoint
{
    get
    {
        Point p = new Point();
        if(srcNode != null && dstNode != null)
        {
            if (srcNode.X < dstNode.X)
                p.X = 0;
            else if (srcNode.X > dstNode.X)
                p.X = 1;
            else
                p.X = 0.5;
 
            if (srcNode.Y < dstNode.Y)
                p.Y = 0;
            else if (srcNode.Y > dstNode.Y)
                p.Y = 1;
            else
                p.Y = 0.5;
        }
        return p;
    }
}
 
public Point LineGradientEndPoint
{
    get
    {
        Point p = new Point();
        if (srcNode != null && dstNode != null)
        {
            if (srcNode.X < dstNode.X)
                p.X = 1;
            else if (srcNode.X > dstNode.X)
                p.X = 0;
            else
                p.X = 0.5;
 
            if (srcNode.Y < dstNode.Y)
                p.Y = 1;
            else if (srcNode.Y > dstNode.Y)
                p.Y = 0;
            else
                p.Y = 0.5;
        }
        return p;
    }
}

X1와 X2, Y1과 Y2를 비교해 작은 쪽을 0, 큰 쪽을 1로 놓으면 그라데이션이 그에 맞춰 그려진다.

Posted by Maverick Unlimited
개발2017. 12. 5. 14:04

Unpacker Error (해결?)

이렇게 저렇게 하니까 잘 안됐지만 결국 짜잔 이렇게 해결했습니다! 하고  블로그에 써야지 라고 마음먹자 마자 허무하게 끝남...


Git for Windows 2.15버전 깔고나니 걍 됨...아니 그동안 한 내 삽질은? 그리고 왜 되는거임?

왜 되는건지 모르니 해결했다고 할 수는 없지만...일단 일을 해야하니 넘어갈 수 밖에...상황만 써둠


1. Git 저장소는 Synology NAS에 있지만 패키지로 설치한건 아니고 그냥 탐색기에서 TortoiseGIT 이용해서 만든 것

2. //192.168.x.x/Project/Test.git 하는 식으로 remote URL을 설정함 (SSH 안씀)

3. 잘 쓰다가 어느날 갑자기 unpacker error 등장. Clone되고 Pull되지만 Push는 안됨. 다른 사람 자리에 가서 해보면 여전히 Push 잘 됨.

4. google 검색해서 chmod chgrp 설정도 해보고 ssh putty 설정도 해보고 credencial도 새로 만들어보고 온갖 삽질을 했지만 차도가 없음

5. 혹시나 해서 Git for Windows 2.15 버전 깔고나니까 잘 됨. (profit???)

6. 근데 다른 사람들은 여전히 2.10쓰면서 계속 잘 되는데 왜 나만 업데이트 해야됨? 역시 뭔가 권한이나 인증 관계 문제가 맞고 그게 새 버전이 인스톨되면서 알아서 고쳐진 것이라고 짐작은 되는데 (2.15로 업데이트하는게 아니라 그냥 2.10을 지우고 새로 깔았어도 됐을 듯...) 확실하진 않음

8. 왜 특별한 계기가 없었는데 갑자기 이런 문제가 발생했고 갑자기 해결되었는지 언젠가 파악해봐야겠다


하지만 안하겠지...그래도 기록은 남겨두자

Posted by Maverick Unlimited
개발2016. 12. 2. 13:55

OpenGL로 wchar를 찍으니 길이가 제대로 안나온다

wglUseFontBitmaps 으로 폰트 설정을 하고 wchar를 찍어보면 문자 사이에 공백이 생김.

char로 바꿔주고 찍어야 정상적으로 찍힌다.


CStringA multibytes(str);

glCallLists(len, GL_UNSIGNED_BYTE, (LPCSTR)multibytes);

Posted by Maverick Unlimited
개발2016. 7. 13. 12:09

MFC 코드의 흐름

http://aesire.tistory.com/17


역시 어지간한건 이미 조사한 사람이 있군...감사합니다

Posted by Maverick Unlimited
개발2016. 7. 12. 11:11

그래프 축에 적절한 간격과 값 부여하기

그래프 그릴 때 엑셀이나 Matlab, OPNET 등에서는 적절한 간격과 값이 저절로 부여된다.

그런데 막상 스스로 그리려고 하니 그 값을 어떻게 만들어내는건지 방법을 금방 떠올리기 어려웠다.

뭐지 로그를 어떻게 잘 이용하나? 정도 밖에 딱히 구체적인 생각이 나지 않는다.

일단 창 크기만 가지고 일정한 간격으로 잘라 그리도록 해서 다른 테스트부터 먼저 해보고

적절한 간격을 구하는 방법에 대한 부분은 뒤로 미뤘는데 이제 다시 생각해볼 시간이 됐다.



일단 몇가지 스레드를 참고.


http://stackoverflow.com/questions/237220/tickmark-algorithm-for-a-graph-axis

http://stackoverflow.com/questions/326679/choosing-an-attractive-linear-scale-for-a-graphs-y-axis

http://stackoverflow.com/questions/361681/algorithm-for-nice-grid-line-intervals-on-a-graph


그런데 소숫점일 경우는 어떻게 처리해야할지 생각해보면 보다 효과적인 방법이 있을 것 같아서

더 찾아보니 이게 나왔다. ACM 알고리즘이라 꽤 모범적인 방법일거라고 보고 해석해본다.


http://lists.gnu.org/archive/html/octave-bug-tracker/2011-09/pdfJd5VVqNUGE.pdf



* Readability, Round-off 고려


반올림이라는 말이 적절한지 모르겠는데 확장적인 의미로 쓰이는 것 같다.

읽기 좋은 간격은 1, 2, 5, 10의 n승의 배수인게 좋다. 그리고 최소 최대값도 고려해야 한다.


좋은 간격:

-0.5, 0.0, 0.5, 1.0, ...

1.24, 1.26, 1.28, ...

100.0, 200.0, 300.0, ..., etc


안좋은 간격:

-1.0, 4.0, 9.0, ...

1.2, 1.31, 1.42, ...

0.0. 4.0, 5.0, 12.0, ..., etc


소개된 스케일 함수(scale1, scale2, scale3)를 보면 scale1은 인터벌 개수가 적절하게 바뀌고 scale2는 인터벌 개수가 주어진 대로이다. scale3은 logarithm 형태의 그래프에 사용한다.


scale1(xMin, xMax, n, xMinP, xMaxP, dist)

// xMin: 실제 최소값

// xMax: 실제 최대값

// n: 요청된 그리드 개수

// xMinP: 최소 바운드값

// xMaxP: 최대 바운드값

// dist: 간격


코드가 포트란이라서 적당히 C++ 코드로 변경해 봄.


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
double scale1(double fMin, double fMax, int nCount, double& fMinBound, double& fMaxBound)
{
    double fInterval = 0.0f;
    double fDist = 0.0f;
    double fCount = (double)nCount;
    double fBound = 0.0f;
    double fMult = 0.0f;
    int nIntervalLog = 0;
    int nSelection = 0;
    int nMult = 0;
     
    double fSqrArr[3] = {1.414214f, 3.162278f, 7.071068f};
    double fIntArr[4] = {1.0f, 2.0f, 5.0f, 10.0f};
     
    double fLimit = 0.00002f;
     
    fInterval = (fMax - fMin) / fCount;
    nIntervalLog = (int)log10(fInterval);
     
    if(fInterval < 1)
        nIntervalLog--;
     
    fBound = fInterval / pow(10.0f, nIntervalLog);
     
    for(nSelection = 0; nSelection < 3; nSelection++)
    {
        if(fBound < fSqrArr[nSelection])
            break;     
    }
     
    fDist = fIntArr[nSelection] * pow(10.0f, nIntervalLog);
     
    // get fMinBound
    fMult = fMin / fDist;
    nMult = (int)fMult;
     
    if(fMult < 0)
        nMult = nMult - 1;
    if(abs((double)nMult + 1.0f - fMult) < fLimit)
        nMult = nMult + 1;
     
    fMinBound = fDist * (double)nMult;
     
    // get fMaxBound
    fMult = fMax / fDist;
    nMult = (int)fMult + 1;
     
    if(fMult < (-1.0))
        nMult = nMult - 1;
    if(abs(fMult + 1.0f - (double)nMult) < fLimit)
        nMult = nMult - 1;
     
    fMaxBound = fDist * (double)nMult;
 
    return fDist;
}


제대로 바꾼건가...대충 값은 맞게 나오는거 같은데?


다만 이 Readability라는게 상당히 애매한 개념이라, 예를 들어 0~899 까지라면

0~1000으로 바뀌어 나오는데 난 0~900가 더 적당하다는 생각이 든다. 간격의 문제일까?

어쨌건 처음에 상당히 골치아픈 문제라고 생각했던 것에 비해

상당히 간단한 코드로 nice한 결과값이 나오긴 한다.


Dist를 구하기 위한 배열을 살짝 조정해주면 Round-off의 정도를 변경할 수도 있을 것 같고.

Posted by Maverick Unlimited
개발2015. 5. 27. 10:26

Process와 Procedure의 차이

마침 이미 조사한 분이 있어 따로 조사할 필요는 없었다.

http://yesaio.egloos.com/3885737

다른 곳에서는 A~Z까지를 process라 할 때 C~K까지를 procedure라 부를 수 있지만 process라고는 할 수 없다는 말도 있었다. 확실히 부분 집합이라는 뜻.

process가 자연적이라면 procedure는 인공적이라는 관점도 있고...어쨌건 대충 뉘앙스를 알겠다. 확실히 대비되는 부분이 있다. '과정'과 '절차'라는 번역어가 완벽하진 않더라도 뉘앙스를 상당 부분 잘 전달해주는 것 같다.

Posted by Maverick Unlimited
개발2015. 4. 9. 16:12

GUI(QT) Programming

상당히 기초적인 부분부터 나오긴 하는데 처음부터 익히는데는 유용한 자료인 듯.

우분투지만 크로스플랫폼 툴이라 별 상관은 없음...



Posted by Maverick Unlimited

티스토리툴바