KR20060002735A - 벡터 그래픽을 위한 마크업 언어 및 객체 모델 - Google Patents

Abstract

프로그램 코드 개발자들이 장면 그래프 데이터 구조와 일관되게 인터페이스할 수 있게 하는 방식으로 해당 엘리먼트 객체 모델을 사용하여 그래픽을 생성하기 위한 엘리먼트 객체 모델 및 벡터 그래픽 마크업 언어가 제공된다. 벡터 그래픽 엘리먼트 객체 모델은 일반적으로 형상 엘리먼트들, 장면 그래프의 장면 그래프 객체 모델과 상관하는 이미지 및 비디오 엘리먼트들을 포함하는 다른 엘리먼트들에 대응한다. 마크업은, 장면 그래프 데이터 구조의 객체들로 번역될, 엘리먼트 트리의 엘리먼트들을 포함하는 데이터로 구문 분석된다. 다른 마크업은 데이터로 직접 번역되고 호출하여 장면 그래프 객체들을 생성한다. 마크업 언어는, 간단한 스트링 포맷 또는 복합 속성 신택스를 포함하여, 엘리먼트를 기술하는 구분되는 방법들을 제공하는데, 이는 명칭이 주어지고, 마크업 내의 다른 위치들에서의 재사용을 가능하게 한다.

마크업, 비주얼, 엘리먼트, 신택스, 속성

Description

벡터 그래픽을 위한 마크업 언어 및 객체 모델 {MARKUP LANGUAGE AND OBJECT MODEL FOR VECTOR GRAPHICS}

본 발명은 일반적으로 컴퓨터 시스템에 관한 것으로, 특히, 컴퓨터 시스템 상의 디스플레이를 위한 그래픽 및 기타 비디오 정보의 처리에 관한 것이다.

컴퓨터 시스템 상의 그래픽을 액세스하는 종래의 즉시 모드 모델(immediate mode model)은 한계에 도달했는데, 이는 부분적으로 메모리 및 버스의 속도가 메인 프로세서 및/또는 그래픽 프로세서의 발전을 따라가지 못했기 때문이다. 일반적으로, 프레임을 준비하기 위한 현재의 모델(예를 들어, WM_PAINT)은 너무 많은 데이터 처리를 필요로 하여, 복잡한 그래픽 효과가 요구되는 경우, 하드웨어 리프레시 속도를 따라갈 수 없다. 그 결과, 종래의 그래픽 모델로 복잡한 그래픽 효과를 시도하는 경우, 인지되는 시각적 효과를 초래하는 변화가 후속 프레임에 대해 제 시간에 완료되는 대신, 그 변화가 다른 프레임들에 더해져서 시각적으로 두드러지게 바람직하지 못한 결과를 야기하게 된다.

그래픽 출력을 제어하는 새로운 모델이 미국 특허 출원 번호 제10/184,795호, 제10/184,796호, 제10/185,775호, 제10/401,717호, 제10/402,322호 및 제10/402,268호에 설명되어 있으며, 이들 출원은 본 발명의 양수인에게 양도되었고 본원에서 참조로 포함된다. 이러한 새로운 모델은 그래픽 처리 기술에서 수많은 주목할 만한 개선을 제공한다. 예를 들면, 미국 특허 출원 번호 제10/184,795호는 일반적으로 다중 레벨 그래픽 처리 시스템과 방법에 관한 것으로서, (예를 들어, 운영 시스템의) 상위 레벨 컴포넌트는, 단순화된 데이타 구조 및/또는 그래픽 커맨드를 하위 레벨 컴포넌트로 전달하기 위하여, 비교적 낮은 동작 속도로, 애니메이션 파라미터들을 갱신하고 장면 그래프(scene graph)의 데이타 구조를 트래버스(traverse)하여, 장면 그래픽 구축의 연산 집약적인 측면을 수행한다. 상위 레벨 처리가 데이터를 상당히 단순화시키기 때문에, 하위 레벨 컴포넌트는, 그래픽 서브시스템의 프레임 리프레시 속도에 대응하는 속도와 같이, (상위 레벨 컴포넌트에 대해) 보다 빠른 속도로 동작하여, 데이터를 그래픽 서브시스템을 위한 일정한 출력 데이터로 처리할 수 있다. 애니메이션이 사용되는 경우, 변화에 따라 전체 장면을 다시 그리는 대신, 렌더링(rendered)될 때, 각 프레임에 대해 미세하게 변화된 장면을 제공하는 순간값들을 획득하기 위해, 필요한 경우, 하위 레벨 처리가 파라미터 간격을 보간하여, 매끄러운 애니메이션을 제공한다.

미국 특허 출원 번호 제10/184,796호는, 그래픽을 그리고자 하는 프로그램 코드(예를 들어, 애플리케이션 프로그램 또는 운영 시스템 컴포넌트)가 장면 그래프 기술(description)의 소정의 태양들을 선택적으로 변화시키는 반면, 다른 태양들은 그대로 놓아둘 수 있도록, 가변(애니메이트된(animated)) 값 및 파라미터화된 그래프 컨테이너를 제공하는 파라미터화된 장면 그래프를 기술하고 있다. 프로그램 코드는, 서로 다른 파라미터를 이용할 수 있으면, 장면 그래프의 이미 작성된 부분들을 재사용할 수도 있다. 이해될 수 있는 바와 같이, 파라미터화를 통해 표시된 항목의 외관을 용이하게 변화시키는 능력 및/또는 장면 그래프의 기존 부분의 재사용은 전체적인 그래픽 처리 효율에 있어 실질적인 이득을 제공한다.

미국 특허 출원 번호 제10/185,775호는 일반적으로 장면 그래프 내의 객체(object) 및 데이터를 통해 비주얼 정보를 저장하기 위한 캐싱 데이터 구조(caching data structure) 및 관련 메커니즘을 기술하고 있다. 데이터 구조는 일반적으로 그 내부에 비주얼 데이터가 실장(populate)되고 사용되는 방법을 지능적으로 제어하는 메커니즘과 연관된다. 예를 들면, 애플리케이션 프로그램에 의해 특별히 요청되지 않는다면, 데이터 구조 내에 저장된 대부분의 정보는, 외부 참조를 갖고 있지 않는데, 이는 이러한 정보가 최적화되거나 또는 다르게 처리될 수 있게 한다. 이해될 수 있는 바와 같이, 이로 인해, 효율성과 자원의 보존을 제공하는데, 예를 들면, 캐시 데이터 구조 내의 데이터가 보다 컴팩트한 다른 포맷으로 처리될 수 있거나, 및/또는 비트맵 또는 기타 후처리 결과(post-processing result)와 같은, 후속되는 반복적 처리에 대한 필요성을 감소시킨다.

상기 개선점들이 그래픽 처리 기술에서 상당한 이점을 제공하지만, 이러한 개선된 그래픽 모델 및 관련된 기타 개선점들을 프로그램들이 간단한 방식으로 효과적으로 사용하는 방식이 여전히 필요하다. 프로그램들이 개선된 그래픽 모델에 의해 제공되는 많은 특징 및 그래픽 처리 능력을 이용하여, 복잡한 그래픽과 시청각 데이타를 효율적인 방식으로 출력할 수 있게 하는 포괄적이고 간단한 모델이 필요하다.

요약하면, 본 발명은, 엘리먼트 객체 모델, 및 프로그램 코드 개발자들이 장면 그래프 데이터 구조와 일관성있게 인터페이스하여 그래픽을 생성할 수 있도록 하는 방식으로 해당 엘리먼트 객체 모델에 액세스하기 위한 벡터 그래픽 마크업 언어를 제공한다. 벡터 그래픽 마크업 언어는 엘리먼트 객체 모델을 통해 벡터 그래픽을 표현하기 위한 교환 포맷(interchange format)을 포함한다. 해석될 경우, 마크업은 장면 그래프 데이터 구조의 객체들로 번역(translate)되는 엘리먼트 트리 내의 엘리먼트들을 포함하는 데이터로 구문 분석(parse)된다. 엘리먼트 트리 레벨에서, 상속 특성(inheritance characteristics) 및 이벤팅(eventing)을 포함하는, 풍부한 프로그램가능성(programmability) 특징을 제공하기 위해, 속성 시스템(property system) 및 레이아웃 시스템이 제공되어, 장면 설계자들이 복잡한 장면들을 간단히 설계할 수 있게 한다. 일반적으로, 벡터 그래픽 엘리먼트들은, 형상 엘리먼트들, 및 장면 그래프 객체 모델의 장면 그래프 객체들과 상관되는 이미지 및 비디오 엘리먼트들을 포함하는 다른 엘리먼트들에 대응한다. 또한, 벡터 그래픽 엘리먼트들의 속성 및 다른 자원들은 장면 그래프 객체 모델의 유사한 속성 및 자원들과 상관된다.

따라서, 벡터 그래픽 시스템은 엘리먼트 레벨로 프로그램될 수 있어, 드로잉 형상 각각이 페이지/스크린 내의 프로그래밍가능한 엘리먼트들중 나머지와 동일한 레벨의 엘리먼트로 표현되어, 레이아웃 시스템, 이벤트들 및 속성들과 상호작용할 수 있다. 또한, 벡터 그래픽 시스템은, 자원 레벨(resource level)로 프로그래밍하기 위한 메카니즘을 제공하며, 이에 의해 장면 설계자는 엘리먼트 트리 및 레이아웃 시스템을 본질적으로 단축시키고(shortcut), 장면 그래프 데이터 구조와 인터페이스하는 비주얼 API 계층으로 직접 프로그램할 수 있다. 이로 인해, 엘리먼트 레벨의 프로그래밍가능성의 일부를 상실하더라도, 적합한 객체를 출력하기 위한 보다 효율적이고 간단한 방식을 제공한다. 일 구현에 있어서, "비주얼 브러시(visual brush)" 유형의 채움(fill)이 프로그램되는 경우, 구문 분석기(parser)는 자원 레벨 데이터를 갖는 API 계층을 직접 호출하여, 대응하는 비주얼 페인트 객체(또한, 엘리먼트 객체 모델과 장면 그래프 객체 모델 사이의 상관관계임)를 생성할 수 있다. 이러한 2계층 시스템에서, 자원 레벨 벡터 그래픽이 효율적인 방식으로 구문 분석되고 직접 저장되는데 비해, 엘리먼트 레벨 벡터 그래픽은, 나중에 객체들로 번역될 필요가 있는, 생성된 엘리먼트들로 구문 분석된다. 동시에, 자원 레벨 데이터 또는 그에 의해 생성된 객체들은 엘리먼트들 및 엘리먼트 트리의 일부에 의해 참조될 수 있다. 이를 위해, 비주얼 페인트 엘리먼트(visual paint element)들을 포함하는 엘리먼트들에 명칭이 제공될 수 있다. 따라서, 장면 설계자는 필요한 프로그래밍가능성과 효율성의 균형을 잡을 수 있는 능력을 갖는다.

엘리먼트 클래스 계층구조는, 형상 클래스, 이미지 클래스, 비디오 클래스 및 캔버스 클래스(canvas class)를 포함한다. 형상 클래스의 엘리먼트는, 사각형, 복선(polyline), 다각형, 경로, 선 및 타원을 포함한다. 각각의 엘리먼트는 채움(속성) 데이터(fill data), 스트로크 데이터(stroke data), 클립핑 데이터(clipping data), 변환 데이터, 필터 효과 데이터 및 마스크 데이터를 포함하거나 또는 그들에 연관될 수 있다. 형상은, 형상을 그리는데 필요한 펜 및 브러시를 구성하기 위해 이용된 상속 및 캐스캐이드된(inherited and cascaded) 프리젠테이션 속성으로 그려진 (장면 그래프 객체 모델의) 지오메트리(geometry)에 대응한다. 이미지 클래스는 형상보다 더 특정적이고, 더 많은 래스터 그래픽 데이터(raster graphic data)를 포함할 수 있으며, 비디오 클래스는, 표시되는 엘리먼트 내에서 비디오(또는 유사한 멀티미디어)가 재생될 수 있게 한다. 캔버스 클래스는 형상을 위한 컨테이너의 역할을 하여, 형상을 경량으로 유지할 수 있다.

일 구현에 있어서, 일반적으로 엘리먼트 트리/속성 시스템에 엘리먼트-레벨 엘리먼트들을 부가하고 이들 엘리먼트에 데이터를 부착하는 구문 분석기/번역기에 의해 마크업 코드가 해석된다. 그 후, 레이아웃 시스템은, 부착된 프리젠터(presenter)들을 갖는 엘리먼트 트리를 취하고, (빌더(builder)를 통해) 데이터를 객체들로 번역하고, 장면 그래프와 인터페이스하는 비주얼 API 계층을 호출하고, 장면 그래프 객체들을 생성한다.

마크업 언어는, 간단한 스트링 포맷 또는 복잡한 객체 표시(복합 속성 신택스(syntax))를 포함하는, 엘리먼트를 기술하기 위한 구별되는 방법들을 제공한다. 단순 스트링 포맷에서, 구문 분석기/번역기 및/또는 레이아웃 시스템은 스트링을 적절한 비주얼 API 객체로 변환하는 유형 변환기(type converter)를 이용한다. 채움 속성이 너무 복잡하여 단일 스트링에 맞추어 질 수 없을 때, 마크업에서 인-라인(in-line)일 수 있는 복합 속성 신택스가 속성 세트를 기술하는데 이용된다. 동일한 렌더링 모델이 엘리먼트 레벨과 API 레벨 간에 공유되기 때문에, 많은 객체들이 동일한데, 이는 구문 분석/번역을 매우 효율적으로 만들며, 다른 이점들을 제공한다. 또한, 자원 인스턴스(resource instance)는 어디든지(예를 들면, 마크업 또는 파일 내) 위치될 수 있고, 명칭에 의해 참조될 수 있다. 이러한 방식으로, 장면 설계자는 복합 속성 신택스에 의해 기술된 엘리먼트들을 포함하여, 장면 전체를 통해 엘리먼트 트리 내의 엘리먼트를 재사용할 수 있다.

다른 이점 및 특성들은, 도면들과 함께 제공되는 이하의 상세한 설명으로부터 명백해질 것이다.

도 1은 본 발명이 반영될 수 있는 예시적인 컴퓨터 시스템을 나타내는 블럭도.

도 2는 본 발명이 반영될 수 있는 그래픽 계층 아키텍쳐를 일반적으로 나타내는 블럭도.

도 3은, 본 발명에 일 태양에 따라 그래픽 커맨드 및 기타 데이타를 제공하기 위해 장면 그래프를 트래버스(traverse)하는 것과 같이, 장면 그래프를 처리하기 위한 비주얼 및 관련 컴포넌트의 장면 그래프의 도면.

도 4는 본 발명의 일 태양에 따라 구성된, 검증 비주얼(validation visual), 드로잉 비주얼 및 관련 Instruction Lists의 장면 그래프의 도면.

도 5는 본 발명의 일 태양에 따른, 객체 모델의 비주얼 클래스를 나타낸 도면.

도 6은 본 발명의 일 태양에 따른, 객체 모델의 다양한 기타 객체들의 도면.

도 7은 본 발명의 일 태양에 따른, 변환 클래스 계층의 도면.

도 8 및 도 9는 본 발명의 일 태양에 따른, 지오메트리 스케일 및 비균일 스케일에서의 비주얼의 데이터의 변환을 각각 나타낸 도면.

도 10은 본 발명의 일 태양에 따른, 객체 모델의 지오메트리 클래스를 나타낸 도면.

도 11은 본 발명의 일 태양에 따른 PathGeometry 구조의 도면.

도 12는 본 발명의 일 태양에 따른, 프리미티브에 의해 생성된 예시적인 그래픽을 나타내는 비주얼 및 Instruction Lists의 장면 그래프의 도면.

도 13은 본 발명의 일 태양에 따른, 객체 모델의 브러시 클래스의 도면.

도 14 및 도 15는 본 발명의 일 태양에 따른, 선형 계조 브러시 객체 내의 데이터로부터 발생된 렌더링된 그래픽의 도면.

도 16은 본 발명의 일 태양에 따른, 원형(radial) 계조 브러시 객체 내의 데이터로부터 발생된 렌더링된 그래픽의 도면.

도 17은 본 발명의 일 태양에 따른, 랜더링된 9개 그리드 브러시 객체의 도면.

도 18은 본 발명의 일 태양에 따른, 다양한 스트레치(stretch) 값들을 갖는 것으로부터 발생된 렌더링된 그래픽의 도면.

도 19는 본 발명의 일 태양에 따른, 다양한 타일(tile) 값을 갖는 것으로부터 발생된 렌더링된 그래픽의 도면.

도 20은 본 발명의 일 태양에 따라 비주얼 브러시 객체 내의 데이타로 부터 발생되는, 그리드 및 변환된 그리드를 나타낸 도면.

도 21은 본 발명의 일 태양에 따른, 비주얼로부터 그려진 그래픽을 렌더링하는 경우, 그리드 및 변환된 그리드의 도면.

도 22는 본 발명의 일 태양에 따른, 엘리먼트 객체 모델의 엘리먼트 클래스들의 도면.

도 23은 본 발명의 일 태양에 따른, 비주얼 API 계층과 인터페이스하기 위해 마크업 언어 코드를 해석하기 위한 컴포넌트들의 도면.

도 24는 본 발명의 일 태양에 따른, 지오메트리 경로(geometry path)를 통한 클립핑(clipping)의 도면.

예시적인 운영 환경

도 1은 본 발명이 구현될 수 있는 적합한 컴퓨팅 시스템 환경(100)의 일례를 도시하고 있다. 컴퓨팅 시스템 환경(100)은 적합한 컴퓨팅 환경의 단지 일례일 뿐이며, 본 발명의 이용 또는 기능의 범위에 대한 어떠한 한계를 제시하기 위한 것은 아니다. 또한, 컴퓨팅 환경(100)은, 예시적인 운영 환경(100) 내에 도시되어 있는 컴포넌트 중 임의의 것 또는 그들의 조합에 관련된 어떤 의존성 또는 필요성을 가지는 것으로 해석되어서도 안된다.

본 발명은 다른 수많은 범용 또는 특수 목적 컴퓨팅 시스템 환경 또는 구성에서 동작할 수 있다. 본 발명에 이용되기에 적합할 수 있는 잘 알려진 컴퓨팅 시스템, 환경 및/또는 구성의 예들은, 개인용 컴퓨터, 서버 컴퓨터, 휴대형 또는 랩 탑 장치, 태블릿 장치, 멀티프로세서 시스템, 마이크로프로세서 기반 시스템, 셋톱 박스, 프로그래밍가능한 가전 기기, 네트워크 PC, 미니 컴퓨터, 메인프레임 컴퓨터, 및 상기 시스템 또는 장치들 중 임의의 것을 포함하는 분산 컴퓨팅 환경 등을 포함하지만, 이에 제한되는 것은 아니다.

본 발명은, 컴퓨터에 의해 실행되는, 프로그램 모듈과 같이, 컴퓨터 실행 가능 명령어들의 일반적인 컨텍스트로 기술될 수 있다. 일반적으로, 프로그램 모듈은, 특정 태스크를 수행하거나 특정 추상 데이터 유형을 구현하는 루틴, 프로그램, 객체, 컴포넌트, 데이터 구조 등을 포함한다. 본 발명은 통신 네트워크를 통해 연결된 원격 처리 장치들에 의해 태스크들이 수행되는 분산 컴퓨팅 환경에서도 실현될 수 있다. 분산 컴퓨팅 환경에서, 프로그램 모듈은 메모리 저장 장치를 포함하는 로컬 및 원격 컴퓨터 저장 매체 모두에 위치할 수 있다.

도 1을 참조하면, 본 발명을 구현하기 위한 예시적인 시스템은 컴퓨터(110) 형태의 범용 컴퓨팅 장치를 포함한다. 컴퓨터(110)의 컴포넌트들은 프로세싱 유닛(120), 시스템 메모리(130), 및 시스템 메모리를 포함한 다양한 시스템 컴포넌트들을 프로세싱 유닛(120)에 결합시키는 시스템 버스(121)를 포함할 수 있지만, 이들에 한정되는 것은 아니다. 시스템 버스(121)는 메모리 버스 또는 메모리 제어기, 주변장치 버스, 및 다양한 버스 아키텍쳐들 중 임의의 것을 이용하는 로컬 버스를 포함하는 몇몇 형태의 버스 구조들 중 임의의 것일 수 있다. 한정이 아니라 예로서, 이러한 아키텍쳐는 ISA(Industry Standard Architecture) 버스, MCA(Micro Channel Architecture) 버스, EISA(Enhanced ISA) 버스, VESA(Video Electronics Standards Association) 로컬 버스, AGP(Accelerated Graphics Port) 버스, 및 메자닌 버스(Mezzanine bus)로도 알려져 있는 PCI(Peripheral Component Interconnect) 버스를 포함한다.

컴퓨터(110)는 전형적으로 다양한 컴퓨터 판독가능한 매체를 포함한다. 컴퓨터 판독가능한 매체는 컴퓨터(110)에 의해 액세스될 수 있는 임의의 이용가능한 매체일 수 있으며, 휘발성 및 불휘발성 매체, 착탈가능 및 착탈불가능 매체를 모두 포함한다. 한정이 아니라 예로서, 컴퓨터 판독가능한 매체는 컴퓨터 저장 매체 및 통신 매체를 포함할 수 있다. 컴퓨터 저장 매체는 컴퓨터 판독가능한 명령어, 데이터 구조, 프로그램 모듈 또는 기타 데이터과 같은 정보의 저장을 위한 임의의 방법이나 기술로 구현된 휘발성 및 불휘발성, 착탈가능 및 착탈불가능 매체를 모두 포함한다. 컴퓨터 저장 매체는 RAM, ROM, EEPROM, 플래시 메모리 또는 기타 메모리 기술, CD-ROM, DVD(digital versatile disks) 또는 기타 광디스크 저장장치, 자기 카세트, 자기 테이프, 자기 디스크 저장장치 또는 기타 자기 저장장치, 또는 원하는 정보를 저장하는 데에 이용될 수 있고 컴퓨터(110)에 의해 액세스될 수 있는 임의의 다른 매체를 포함한다. 전형적으로, 통신 매체는 반송파 또는 기타 전송 매커니즘과 같은 변조된 데이터 신호에 컴퓨터 판독가능한 명령어, 데이터 구조, 프로그램 모듈, 또는 기타 데이터를 포함하고, 임의의 정보 배달 매체를 포함한다. "변조된 데이터 신호(modulated data signal)"라는 용어는 신호 내의 정보를 인코딩하는 것과 같은 방식으로 설정되거나 변경된 하나 이상의 특성을 갖는 신호를 의미한다. 한정이 아니라 예로서, 통신 매체는 유선 네트워크 또는 직접 유선 접속 과 같은 유선 매체, 및 음향, RF, 적외선 및 기타 무선 매체와 같은 무선 매체를 포함한다. 상기 중 임의 것의 조합도 컴퓨터 판독가능한 매체의 범위 내에 포함될 수 있다.

시스템 메모리(130)는 ROM(131) 및 RAM(132)와 같은 휘발성 및/또는 불휘발성 메모리 형태의 컴퓨터 저장 매체를 포함한다. 시동 동안과 같이, 컴퓨터(110) 내의 구성요소들 간의 정보 전송을 돕는 기본 루틴을 포함하는 BIOS(basic input/output system)(133)은, 일반적으로 ROM(131)에 저장된다. 전형적으로, RAM(132)은 프로세싱 유닛(120)으로 즉시 액세스될 수 있거나 및/또는 프로세싱 유닛(120)에 의해 현재 동작중인 데이터 및/또는 프로그램 모듈을 포함한다. 한정이 아니라 예로서, 도 1은 운영 시스템(134), 애플리케이션 프로그램(135), 기타 프로그램 모듈(136) 및 프로그램 데이터(137)를 도시하고 있다.

컴퓨터(110)는 기타 착탈가능/착탈불가능, 휘발성/불휘발성 컴퓨터 저장 매체를 포함할 수도 있다. 단지 예로서, 도 1은 착탈불가능, 불휘발성 자기 매체로부터/로 판독 또는 기입하는 하드 디스크 드라이브(141), 착탈가능, 불휘발성 자기 디스크(152)로부터/로 판독 또는 기입하는 자기 디스크 드라이브(151), 및 CD-ROM 또는 기타 광매체와 같은 착탈가능, 불휘발성 광디스크(156)로부터/로 판독 또는 기입하는 광디스크 드라이브(155)를 도시한다. 예시적인 운영 환경에서 이용될 수 있는 기타 착탈가능/착탈불가능, 휘발성/불휘발성 컴퓨터 저장 매체는, 자기 테이프 카세트, 플래시 메모리 카드, DVD, 디지탈 비디오 테이프, 고상 RAM, 고상 ROM 등을 포함하나, 이들로 한정되는 것은 아니다. 하드 디스크 드라이브(141)는 통상 적으로 인터페이스(140)와 같은 착탈불가능 메모리 인터페이스를 통해 시스템 버스(121)에 접속되며, 자기 디스크 드라이브(151) 및 광디스크 드라이브(155)는 통상적으로 인터페이스(150)와 같은 착탈가능 메모리 인터페이스에 의해 시스템 버스(121)에 접속된다.

도 1에 도시되고 상술한, 드라이브 및 그와 연관된 컴퓨터 저장 매체는 컴퓨터(110)에 컴퓨터 판독가능한 명령어, 데이터 구조, 프로그램 모듈 및 기타 데이터의 저장을 제공한다. 도 1에서, 예를 들어, 하드 디스크 드라이브(141)는 운영 시스템(144), 애플리케이션 프로그램(145), 기타 프로그램 모듈(146) 및 프로그램 데이터(147)를 저장하는 것으로 도시된다. 주의할 점은, 이러한 컴포넌트들은 운영 시스템(134), 애플리케이션 프로그램(135), 기타 프로그램 모듈(136) 및 프로그램 데이터(137)와 동일하거나 또는 상이할 수 있다는 것이다. 운영 시스템(144), 애플리케이션 프로그램(145), 기타 프로그램 모듈(146) 및 프로그램 데이터(147)는, 이들이 최소한 상이한 카피라는 것을 나타내기 위하여 본 명세서에서 서로 다른 번호가 주어진다. 사용자는 태블릿(전자 디지타이저)(164), 마이크(163), 키보드(162), 및 일반적으로 마우스, 트랙볼 또는 터치 패드로 지칭되는 포인팅 장치(161)와 같은 입력 장치들을 통해 커맨드 및 정보를 컴퓨터(110)에 입력할 수 있다. 기타 입력 디바이스(도시되지 않음)는 조이스틱, 게임 패드, 위성 접시, 스캐너 등을 포함할 수 있다. 이러한 입력 디바이스 및 기타 입력 디바이스는 종종 시스템 버스에 결합된 사용자 입력 인터페이스(160)를 통해 프로세싱 유닛에 접속되지만, 병렬 포트, 게임 포트 또는 USB(Univeral Serial Bus)와 같은 기타 인터페이 스 및 버스 구조에 의해 접속될 수 있다. 또한, 모니터(191) 또는 다른 유형의 표시 장치도 비디오 인터페이스(190)와 같은 인터페이스를 통해 시스템 버스(121)에 접속된다. 또한, 모니터(191)는 터치-스크린 인터페이스(192)와 같은 인터페이스를 통해 수기(handwriting)와 같은 디지털화된 입력을 컴퓨터 시스템(110)에 입력할 수 있는 터치-스크린 패널(193)과 통합될 수도 있다. 주의할 점은, 터치 스크린 패널(193)이 본질적으로 태블릿(164)으로 기능하는 태블릿형 퍼스널 컴퓨터에서와 같이 컴퓨팅 장치(110)가 포함되는 하우징에 모니터 및/또는 터치 스크린 패널이 물리적으로 결합될 수 있다는 것이다. 이외에, 컴퓨팅 장치(110)와 같은 컴퓨터는 출력 주변장치 인터페이스(194) 등을 통해 접속될 수 있는 스피커(195) 및 프린터(196)와 같은 기타 주변장치 출력 장치들을 포함할 수도 있다.

컴퓨터(110)는, 원격 컴퓨터(180)와 같이 하나 이상의 원격 컴퓨터들에 대한 논리 접속을 이용한 네트워크 환경에서 동작할 수 있다. 도 1에는 메모리 저장 장치(181)만이 도시되어 있지만, 원격 컴퓨터(180)는 퍼스널 컴퓨터, 서버, 라우터, 네트워크 PC, 피어 장치(peer device), 또는 기타 일반적인 네트워크 노드일 수 있으며, 통상적으로 컴퓨터(110)에 대하여 상술한 다수 또는 모든 구성요소를 포함한다. 도 1에 도시된 논리적 접속은 LAN(Local Area Network)(171) 및 WAN(Wide Area Network)(173)을 포함할 수 있으나, 다른 네트워크를 포함할 수도 있다. 이러한 네트워크 환경은 사무실, 기업형(Enterprise-wide) 컴퓨터 네트워크, 인트라넷 및 인터넷에 일반적이다.

LAN 네트워크 환경에서 사용되는 경우, 컴퓨터(110)는 네트워크 인터페이스 또는 어댑터(170)를 통해 LAN(171)에 접속된다. WAN 네트워크 환경에서 사용되는 경우, 컴퓨터(110)는 통상적으로 모뎀(172) 또는 인터넷과 같은 WAN(173) 상에서 통신을 설정하기 위한 기타 수단을 포함한다. 내장형 또는 외장형일 수 있는, 모뎀(172)은 사용자 입력 인터페이스(160) 또는 기타 적절한 메카니즘을 통해 시스템 버스(121)에 접속될 수 있다. 네트워크 환경에서, 컴퓨터(110) 또는 그 일부에 대하여 기술된 프로그램 모듈은 원격 메모리 저장 장치에 저장될 수 있다. 한정이 아니라 예로서, 도 1은 메모리 장치(181)에 상주하는 원격 애플리케이션 프로그램(185)을 도시한다. 도시된 네트워크 접속은 예시적이며 컴퓨터들 사이에서 통신 연결을 설정하는 기타 수단이 사용될 수 있다는 것이 이해될 것이다.

그래픽 아키텍쳐

본 발명의 일 태양은 일반적으로, 시스템 디스플레이 상에 그래픽 출력을 렌더링하기 위하여, 애플리케이션 또는 운영 시스템 컴포넌트와 같은 프로그램 코드가, 드로잉 명령어 및 기타 정보(예를 들어, 이미지 비트맵)를 그래픽 컴포넌트들과 통신하는 것을 가능케하는 것에 관한 것이다. 이를 위해, 본 발명은 형상 엘리먼트들 및 다른 엘리먼트들의 세트, 그룹화 및 합성 시스템, 프로그램들이 데이터 구조, 드로잉 프리미티브들(커맨드들), 및 기타 그래픽 관련 데이터로 장면 그래프를 실장(populate)할 수 있게 하는, 객체 모델 내의 일반적인 속성 시스템과의 통합과 함께 마크업 언어를 제공한다. 처리될 때, 장면 그래프는 스크린 상에 표시되는 그래픽으로 나타난다.

도 2는 본 발명이 구현될 수 있는 일반적인, 계층화된 아키텍처(200)를 도시 한다. 도 2에서 표현된 바와 같이, 프로그램 코드(202)(예를 들어, 애플리케이션 프로그램 또는 운영 시스템 컴포넌트 등)는, 이미징(imaging)(204), 벡터 그래픽 엘리먼트(206), 및/또는 비주얼 애플리케이션 프로그래밍 인터페이스(API) 계층(212)에 직접 제공되는 기능/메소드 호출(call)을 포함하는, 하나 이상의 다양한 방법을 통해 그래픽 데이터를 출력하도록 개발될 수 있다. API 계층과의 직접적인 상호작용은, 앞서 언급되는 "Visual and Scene Graph interface"라는 제목의 공동 출원중인(copending) 특허출원에서 추가로 설명된다.

일반적으로, 이미징(204)은, 비트맵과 같은 이미지를 로딩, 편집 및 저장하기 위한 메카니즘을 프로그램 코드(202)에 제공한다. 이러한 이미지들은 시스템의 다른 부분에 의해 사용될 수 있으며, 이미지를 직접 그리기 위해 프리미티브 드로잉 코드(primitive drawing code)를 사용하는 방법도 있다.

본 발명의 일 태양에 따르면, 벡터 그래픽 엘리먼트(206)는 (아래에서 기술되는 바와 같이) 나머지 객체 모델과 일관된, 그래픽을 그리는 다른 방법을 제공한다. 벡터 그래픽 엘리먼트(206)가 마크업 언어를 통해 생성될 수 있으며, 이는 엘리먼트/속성 시스템(208) 및 레이아웃 시스템(210)이 처리하여 비주얼 API 계층(212)을 적절히 호출한다. 아래에서 설명되는 바와 같이, 일반적으로 벡터 그래픽 엘리먼트(206)는, 장면 그래프가 그려지는 객체 모델의 객체들로 구문 분석되며, 이는 엘리먼트/속성 시스템(208) 및 레이아웃 시스템(210)을 경유하여 엘리먼트 레벨을 통해 장면 그래프에 제공될 수 있거나, 또는 아래에서도 설명되는 바와 같이, 자원 레벨에서 보다 효율적인 방식으로 제공될 수 있다.

일 구현에서, 그래픽 계층 아키텍처(200)는 상위 레벨 합성(composition) 및 애니메이션 엔진(214)를 포함하며, 이는 캐싱 데이터 구조(caching data structure)(216)를 포함하거나 그렇지 않으면 이와 연관된다. 캐싱 데이터 구조(216)는 아래에서 설명되는 바와 같이, 정의된 객체 모델에 따라 관리되는 계층적으로 배열된 객체를 포함하는 장면 그래프를 포함한다. 일반적으로, 비주얼 API 계층(212)는, 객체를 생성하며 그들에 데이터를 제공하기 위해 객체를 개방 및 폐쇄하는 등의 능력을 포함하여, 캐싱 데이터 구조(216)에 대한 인터페이스를 프로그램 코드(202)(및 레이아웃 시스템(210))에 제공한다. 즉, 상위 레벨 합성 및 애니메이션 엔진(214)은, 개발자가 그래픽 정보를 표시하기 위한, 그래픽 및 매체에 관한 의도를 표현할 수 있는 통합된 매체 API 계층(212)에 노출되고, 플랫폼이 프로그램 코드를 위해 하드웨어의 사용을 최적화할 수 있도록 충분한 정보를 하부 플랫폼(underlying platform)에 제공한다. 예를 들어, 하부 플랫폼은 캐싱, 자원 협의(resource negotiation) 및 매체 통합(media integration)을 담당할 것이다.

일 구현에서, 상위 레벨 합성 및 애니메이션 엔진(214)은 명령어 스트림 및 가능한 다른 데이터(예를 들어, 비트맵에 대한 포인터)를 고속의 하위 레벨 합성 및 애니메이션 엔진(218)으로 보낸다. 본 명세서에서 사용되는, '상위 레벨(high-level)' 및 '하위 레벨(low-level)'이라는 용어는, 일반적으로 소프트웨어 컴포넌트가 보다 상위 레벨 컴포넌트에 대해 낮을수록, 해당 컴포넌트가 하드웨어에 보다 가깝다는, 다른 컴퓨팅 시나리오에서 사용되는 용어와 유사하다. 따라서, 예를 들어, 상위 레벨 합성 및 애니메이션 엔진(214)으로부터 전송된 그래픽 정보는, 그래 픽 데이타를 하드웨어를 포함하는 그래픽 서브시스템(222)에 전송하기 위해 정보가 사용되는, 하위 레벨 합성 및 애니메이션 엔진(218)에 수신될 수 있다.

프로그램 코드(202)와 함께 상위 레벨 합성 및 애니메이션 엔진(214)은 프로그램 코드(202)에 의해 제공된 그래픽 장면을 나타내도록 장면 그래프를 구축한다. 예를 들어, 그려지는 각각의 아이템은, 시스템이 장면 그래프 데이터 구조(216)에서 캐싱하는, 드로잉 명령어로 로딩될 수 있다. 아래에서 설명되는 바와 같이, 이러한 데이터 구조(216) 및 그려지는 대상을 지정하기 위한 많은 다양한 방법이 있다. 또한, 상위 레벨 합성 및 애니메이션 엔진(214)은 선언형(또는 기타) 애니메이션 제어(예를 들어, 애니메이션 간격) 및 타이밍 제어를 제공하기 위해 타이밍 및 애니메이션 시스템(220)과 통합된다. 주의할 점은, 애니메이션 시스템은 애니메이트 값들(animate values)이, 예를 들어 엘리먼트 속성 레벨(208), 비주얼 API 계층(212)의 내부, 및 기타 임의의 자원들 내부를 포함하여, 시스템 내의 임의의 장소에 본질적으로 전달되게 한다는 점이다. 타이밍 시스템은 엘리먼트 및 비주얼 레벨에 노출된다.

하위 레벨 합성 및 애니메이션 엔진(218)은 장면의 합성, 애니메이팅 및 렌더링을 관리하며, 그 후, 이는 그래픽 서브시스템(222)에 제공된다. 하위 레벨 엔진(218)은 멀티 애플리케이션의 장면들에 대한 렌더링들을 합성하고, 렌더링 컴포넌트를 사용하여, 스크린에 그래픽의 실질적 렌더링을 구현한다. 그러나, 주의할 점은, 때때로 일부 렌더링이 상위 레벨에서 이루어지는 것이 필요하거나 및/또는 이점이 될 수 있다는 것이다. 예를 들어, 하위 계층들이 멀티 애플리케이션으로부 터의 요청을 서비스하면서, 상위 계층은 각 애플리케이션 베이스(per-application basis)로 인스턴트화(instantiate)됨으로써, 상위 레벨에서 이미징 메카니즘(204)을 통해 시간-소비적 또는 애플리케이션에 특정된 렌더링을 수행하고, 비트맵에 대한 기준을 하위 계층으로 전달하는 것이 가능하다.

장면 그래프 객체 모델(Scene Graph Object Model)

아래에 기술되는 바와 같이, 렌더링 모델은 상위 레벨의, 제어-기반 벡터 그래픽 엘리먼트(206)에 의해 공유되며, 하위 레벨 객체들은 장면 그래프 데이터 구조(216)에서 사용된 비주얼 API 계층(212)에 의해 생성된다. 이로 인해, 본 발명의 상위 레벨 엘리먼트들과 하위 레벨 객체들 간에 상당한 양의 상관을 제공한다. 아래에서는 장면 그래프 객체 모델의 일 구현을 설명한다.

본 발명은 그래픽 및 랜더링 서비스에 대해 몇몇 계층의 액세스를 제공한다. 최상층에서, 벡터 그래픽은, XML-기반 그래픽 마크업에 공통적인 다수의 이점들을 제공하는데, 이는 본 발명의 객체 모델과 함께 간단하게 사용되고, 용이하게 재사용가능하며, 유사한 시스템들의 사용자들에게 일반적으로 친숙하다는 점을 포함한다. 객체들은 마크업 엘리먼트들로서 이용가능한데, 속성들은 그러한 엘리먼트들에 대한 속성 또는 복합 속성들로서 노출된다.

본 발명은 Visual 객체들의 사용을 통해 그래픽 컨텐트를 랜더링한다. 이러한 하부 Visual 계층은 몇가지 방식으로 이용가능하다. 프로그래머들은 코드 상태의 비주얼들에 직접적으로 액세스할 수 있으며, 객체 모델을 사용하여 프로그램할 수 있고, 본 발명의 일 태양에 따라, XML-기반 마크업을 사용할 수 있다.

Polygon 및 Path 엘리먼트들과 유사하게, 미리 정의된 벡터 형상들이 Vector Graphic에서 이용가능하고, Canvas, DockPanel, FlowPanel과 같이, 레이아웃 엘리먼트 내에 포함된다. Canvas 엘리먼트는, 부모 공간(parent space) 내에 엘리먼트들을 절대적으로 배치시키기 위한 수단을 제공한다. Canvas 및 그들의 자식 형상들(child shapes)에 대해, 스크린 좌표를 측정하는 디폴트 유닛은 장치 독립적인 화소이다. DockPanel 및 FlowPanel은 다수의 크기 및 정렬 속성들 뿐만 아니라, 경계들에 대한 제어도 제공한다.

Vector Graphics은, SVG의 사용자들에게 친숙할 다수의 정의된 벡터 그래픽 형상들을 제공한다. 이러한 엘리먼트들은 Shape 클래스로부터 상속되고, Ellipse, Line, Path, Polygon, Polyline 및 Rectangle를 포함한다. 이러한 엘리먼트들은, Stroke 및 StrokeThcikness를 포함하는, Shape, 및 Fill 및 데이터 속성들로부터 다수의 공통 속성을 상속하여 좌표들 및 정점들을 지정한다. 개발자들이 변환을 적용함으로써, 형상들을 스큐(skew), 회전, 이동(translate) 및 스케일(scale)할 수도 있다.

Line 엘리먼트는 편리한 예를 제공한다. 다음의 예는 시작 및 종료점들, 스트로크 컬러(stroke color)와 폭, 및 선의 단부들에서의 둥근형태의 캡핑(capping)을 위한 좌표를 지정한다.

Ellipse는 CenterX 및 CenterY 속성을 갖는 형상의 중심을 정의함으로써 생성된다. 초점들을 지정하는 대신, RadiusX 및 RadiusY 속성을 설정함으로써 타원의 경계가 설정된다. Vector Graphic에서 원을 그리기 위해, 개발자는 RadiusX 및 RadiusY 값들이 동일한 타원을 지정할 수 있다.

Path 객체는, 개방형이거나 폐쇄형이거나 간에, 곡선 및 복잡한 형상을 그리는 수단을 제공한다. Path는 Shape 클래스로부터 상속되는 객체들에 대해 일반적으로 이용가능한 속성을 노출시키지만, 개발자가, 보다 복잡한 파라미터들을 지정하여 곡선을 기술하게 할 수도 있다. 개발자는, Data 내의 특별한 신택스를 사용하여 경로 데이터를 지정하거나, 또는 PathGeometry 및 PathGeometry 객체를 사용 하여 개별적인 경로 세그먼트들을 지정하는 것을 포함하여, 여러가지 방식으로 마크업의 경로들을 사용할 수 있다.

Data 속성에 대해 제공된 좌표 쌍들 및 인라인(inline) 파라미터들은 선 세그먼트들, 바이자르 곡선(Bezier curve) 및 다양한 기타 경로 규격을 지정할 수 있다. 다음의 예들은 2개의 서브경로를 정의하는 Path 엘리먼트를 나타낸다.

Data 속성 스트링은, Canvas의 좌표계 내의 경로에 대한 시작점을 설정하는 M에 의해 표시되는, "moveto" 커맨드로 시작한다. Path 데이터 파라미터들은 대소문자를 구분(case-sensitive)한다. 대문자 M은 새로운 현재점에 대한 절대 위치를 나타낸다. 소문자 m은 상대적 좌표를 나타낸다. 제1 서브경로는, (100, 200)에서 시작하고 (400, 175)에서 종료하며, 2개의 제어점들 (100, 25) 및 (400, 350)을 사용하여 그려진, 3차원 바이자르 곡선이다. 이러한 서브경로는 Data 속성 스트링 내의 C 커맨드에 의해 표시된다. 다시, 대문자 C는 절대 경로를 나타내며, 소문자 c는 상대 경로를 나타낸다.

제2 서브경로는, 앞선 서브경로의 종료점(400, 175)로부터 새로운 종료점(280, 175)로 그려진, 선을 지정하는, 절대 수평(absolute horizontal) "lineto" 커맨드 H로 시작한다. 수평 "lineto" 커맨드이기 때문에, 지정된 값은 x축 좌표이다.

또한, 마크업 내의 경로 데이터를 지정하기 위해 보다 많은 장황한 신택스(verbose syntax)를 사용하는 것도 가능한데, 이로 인해, 개발자가 복합 속성을 지정하고 마크업을 보다 판독가능하게 만들수 있는 이점이 있다. 이 경우, PathGeometry 객체가, 원호 및 곡선들과 같은 복잡한 형상들을 생성하는데 사용될 수 있다. PathGeometry 객체들은 하나 이상의 PathFigure 객체들로 구성되는데, 각 PathFigure는 서로 다른 "도형(figure)" 또는 형상을 표현한다. 각 PathFigure 자체는 하나 이상의 PathSegment 객체로 구성되며, 각각은 도형 또는 형상의 접속부를 나타낸다. 세그먼트 유형들은 LineSegment, BezierSegment 및 ArcSegment를 포함한다.

다음의 코드는, PathGeometry 및 PathFigure를 사용하여 경로 데이터를 지정하며, 몇몇의 세그먼트들이 PathFigure에 부가되어 형상을 형성한다. 이 경우, 세그먼트들은 PathFigure 객체의 Segments 속성을 사용하여 부가되었다. 이러한 마크업은 4개의 바이자르 곡선을 생성한다. 유의할 점은, PathFigure의 제1 세그먼트는 StartSegment이라는 것이다:

Vector Graphics 형상들은 Brush 객체의 다양한 속성을 노출시켜 그들의 Stroke 및 Fill의 컬러를 지정한다. 다음의 예는, Canvas 및 Ellipse 엘리먼트들에 대해 이들 속성을 지정한다. 주의할 점은, 컬러 속성에 대한 유효 입력은 키워드 또는 16진수 컬러값일 수 있다는 것이다.

대안적으로, 개발자는 복합 속성 신택스 및 SolidColorBrush 클래스를 사용하여 컬러들을 지정할 수 있다. 보다 많은 복합 신택스를 사용하여 속성을 지정하는 것은, 속성 시트(property sheet)를 갖는 그래픽 마크업을 재사용할 때 또는 컬러와 같은 형상 속성을 애니메이트하는데 필수적이다.

이러한 불규칙적인 복선(polyline) 형상은 Stroke 및 Fill 속성에 대해 미리 정의된 컬러값들을 사용한다. FillOpacity 속성은, 다소 투명하게 함(0.8의 불투명도)으로써 이 경우 채우는 컬러에 영향을 주어, 임의의 기초 컬러와 혼합된다.

형상을 위한 배경 및 솔리드 컬러 채움(solid color fill)을 지정할 때, 계조가 지정될 수 있다. 다음의 예는 수평 계조를 Rectangle의 Fill 속성으로 설정하고, 시작 컬러를 Blue로, 종료 컬러를 Red로 설정한다.

또한, 개발자는 복합 속성 표기법을 사용하여 계조를 지정할 수도 있다. 이러한 표기법은, 계조를 랜더링할 경우 훨씬 큰 지정성(specificity)을 제공하고 추가 속성을 노출시킨다. 형상의 채움을 계조로 애니메이트하기 위해, 예를 들면, 복합 표기법이 사용된다. 다음의 예는 RadialGradientBrush 객체를 사용하여 Rectangle에 계조를 설정한다. RadialGradientBrush 객체는, 설정될 수 있는 애니메이션 또는 임의의 변형, 및 자신의 반지름과 같은, 계조의 속성에 대한 액세스를 제공하며, 이러한 속성은 GradientBrush로부터 상속된다. GradientStopCollection 컬렉션은 개발자로 하여금 다수의 계조 스톱(gradient stop)들을 지정하고 그들의 Offset(계조 내의 스톱의 위치)를 나타낼 수 있게 한다.

본 발명은 벡터로 그려진 형상들에 대한 표준 변형을 제공한다. 개발자는 형상들을 스큐하고, 회전시키고, 형상들의 스케일을 변경하고 형상들을 정적인 그래픽 또는 애니메이션으로 번역(리포지션(reposition))할 수 있다. 마크업에서 Transform 객체들을 사용하기 위해서, TransformDecorator의 자식들로 지정될 필요가 있다.

ScaleTransform 변환은 이용가능한 변환들중 가장 간단하고, 엘리먼트가 크기조정(resize)되어야 하는 인자를 간단히 지정함으로써 사용된다. 다음의 예는 부모 Canvas의 좌표계의 y축을 따라 Polygon 엘리먼트를 150퍼센트로 크기조정한 다.

유의할 점은, 동일한 TransformDecorator 객체 내의 추가 변환을 지정하면, TransformCollection 내에 포함될 필요가 있다. 또한, 각 변환이 구문 분석되고 적용되는 순서는 최종 효과에 차이를 나타낸다. 예를 들면, 엘리먼트를 서로 다른 스크린 좌표들로 이동하기 전에 엘리먼트를 회전시키는 것은 차이를 만든다.

다음의 예는 2개의 복선 엘리먼트들에 적용된 회전 및 이동을 나타낸다.

주의할 점은, 이러한 2개의 변환들이 그들 각각의 형상에 대해 동일한 최종 스크린 위치를 생성하지 않는다는 것이다. 회전 변환을 사용할 경우, 변환은 특정 엘리먼트에 대해 전체 좌표계를 회전시킨다. 원점에 대한 엘리먼트의 위치에 따라, 회전 효과는 "제자리(in place)"로 회전시키지 않을 수 있다. 예를 들면, x축 을 따라 0으로부터 200 단위들에 위치한 엘리먼트에 대해, 30도의 회전은 원점 주위에 그려진, 반지름 200을 갖는 원을 따라 그 엘리먼트를 30도 회전시키는 효과를 가진다. 이 때문에, Transform를 다룰때, 엘리먼트를 원점에 대해 이동시키고, 회전을 적용하고, 스큐하고, 변환을 스케일하며, 그 후, 엘리먼트를 최종 위치로 다시 이동시키는 것이 보다 간단하다.

변환 설정에서의 기타 이동들에 상관없이, 특정한 점 주위의 회전을 지정하는데 특정 신택스가 사용될 수 있다. 실제, 이러한 신택스는 새로운 원점으로의 이동, 회전 및 앞선 원점으로의 재이동을 지정한다. 점 (cx, cy) 주위의 r도 회전을 지정하기 위해, 다음의 신택스를 사용한다.

transform = "rotate(rx [cx, cy])"

스큐 변환은, 개발자로 하여금 형상을 하나 또는 양쪽 축을 따라 왜곡시킬 수 있게 한다. SkewTransform 클래스는 어느 하나의 축을 따라 비례적인 오프셋을 지정하는 AngleX 및 AngleY를 제공한다.

기타 변환의 경우, 스큐 변환을 적용하는 효과는 단지 형상이 아니라 좌표계를 스큐하는 것이다. 따라서, 좌표계는 원점이 어디로 설정되어 있던지 간에 원점 으로부터 스큐된다. 원점으로부터 소정의 거리에 있는 형상에 대한 스큐 변환이 이루어지면, "빈 공간(empty space)"도 스큐를 반영하여, 엘리먼트 배치(positioning)에 영향을 미친다. 동일한 이유로, 개발자들이 배치 변환을 적용하는 순서는 렌더링된 스큐 또는 회전에 영향을 미친다.

언제나 브러시가 사용되어 형상 또는 컨트롤에 컬러가 부가된다. 본 발명은, 개발자의 애플리케이션이 사용자 인터페이스(UI) 엘리먼트를 간단한 솔리드 컬러(solid color)중 임의의 것으로 착색할 수 있게 하는 마크업을 패턴과 이미지들의 복합 세트에 제공한다.

브러시들은 캔버스 상에 그려진 형상의 에지 및 내부를 색칠할 수 있다. 그들은 UI을 구성하는 임의의 엘리먼트들의 외관을 변경하는데 사용될 수도 있다. 다음은 Brush 유형의 소정의 속성들이며 브러시들중 임의의 것을 수용할 수 있다.

Control.Background

Control.BorderBrush

Column.Background

Text.Foreground

Shape.Fill

Shape.Stroke

2가지 주된 유형의 브러시, 즉 벡터 및 비트맵 브러시가 존재한다. 벡터 기반 브러시는, SolidColorBrush, LinearGradientBrush, RadialGradientBrush, 및 DrawingBrush(비록 DrawingBrush가 비트맵들로 채워진 형상들을 포함할 수 있더라 도)를 포함한다. 비트맵-기반 브러시는 ImageBrush 및 NineGridBrush를 포함한다. 일반적으로, 영역을 채우기 위해 스트레치되거나 스케일될 때, 비트맵들은 품질을 잃어버리지만, 벡터는 그렇지 않다. 따라서, 가능한 경우에는 벡터-기반 브러시가 사용되어야 한다.

기본 유형의 채움은, 영역을 솔리드 컬러로 채우는 SolidColorBrush이다. 솔리드 컬러를 지정하는 몇가지 방법이 존재한다. 잘 알려진 컬러들은 명칭으로 선택될 수 있다. 예를 들면, 형상의 Fill 속성이 "Red"로 설정될 수 있다. 컬러는, 적색, 녹색 및 청색의 양들을 지정하여 단일 솔리드 컬러로 결합시킴으로써 32비트 컬러 팔레트로부터 선택될 수 있다. 32 비트 팔레트로부터 컬러를 지정하기 위한 포맷은, "#RRGGBB"인데, 여기서 RR은 적색의 상대적인 양을 지정하는 2자리의 16진수이고, GG는 녹색의 양을 지정하며, BB는 청색의 양을 지정한다. 또한, 컬러는 "#AARRGGBB"로 지정될 수 있는데, 여기서 AA는 컬러의 투명도 또는 알파 채널을 지정한다. 기타 컬러 방식이 가능하다.

다음의 예에서, Ellipse 엘리먼트의 Fill은 미리 정의된 컬러 이름들중 하나를 사용하여 설정된다.

알파 채널이 임의의 솔리드 컬러 브러시에 직접적으로 지정될 수 있고, 브러시의 Opacity 속성으로 지정될 수도 있다. 전체 엘리먼트 및 그의 자식 엘리먼트들의 불투명도는 UIElement.Opacity 속성을 사용하여 지정될 수 있다. 이들 각각의 값은 0과 1 사이의 Double로서 지정된다. 1의 값은 완전이 불투명한 것이고 0의 값은 완전히 투명한 것이다. 불투명도를 기술하는 다양한 방법들은 누적적(cumulative)이다. 즉, 알파 채널이 0x7F(50 퍼센트 불투명도)이고 UIElement.Opacity 속성이 0.5(50퍼센트 불투명도)인 경우, 엘리먼트는 25퍼센트 불투명도로 채색된다.

계조 브러시는 하나의 컬러에서 축을 따라 다른 컬러로 변화하는 채움이다. Vector Graphics에서 지원되는 2가지 유형의 계조인 선형 계조(linear gradient) 및 원형 계조(radial gradient)가 존재한다.

계조 브러시의 기본적인 빌딩 블록은 계조 스톱(gradient stop)이다. 계조 스톱은 계조 축을 따라 상대적 오프셋으로 컬러를 지정한다. 계조 스톱들 간의 포인트들의 컬러는 2개의 경계 계조 스톱들에 의해 지정된 컬러의 조합으로 선형 보간된다. 오프셋은 0에서 1 사이의 Double이다. Gradients의 예들은 아래에 제공된다.

Gradient 브러시를 가지는 한가지 방법은 계조 스톱들을 명시적으로 지정하는 것이다. 다음은 예이다:

다음의 예에서, LinearGradientBrush가 사용되어 4개의 계조 스톱들을 가지는 선형 계조로 Button의 Background를 채운다.

RadialGradientBrush는 원형 계조로 영역을 채우는데 사용된다. 원형 계조는 선형 계조와 유사하나, 계조축이 타원의 내부로부터 외부로 향한다. 원형 계조 로 채워진 원은 노란색 중심과 녹색 윤곽을 가지고, 그 사이에는 보간된 컬러를 가진다. 다음의 이미지는 백색에서 회색으로 진행하는 원형 계조로 채워진 사각형을 나타낸다. 바깥 원은 계조 원을 나타내며, 적색 도트는 초점을 표시한다. 이러한 계조는 Pad로 설정된 자신의 SpreadMethod를 가진다.

다음의 예에서, Rectangle 엘리먼트의 Fill 속성은 RadialGradientBrush를 사용하여 설정된다. 원형 계조는 (0.5,0.5)의 Focus point를 가진다.

단지 2개 컬러로 계조를 생성하는 경우, 키워드들이 스트로크, 채움 및 배경 속성에 대해 사용되어 표기를 단순화시킨다. 다음의 예는, 청색에서 적색으로 변화하는, 선형 계조의 한 유형인 수평 계조로 채워진 사각형을 생성하는 방법을 도시한다.

<Rectangle

Fill="HorizontalGradient Blue Red"

RectangleLeft="120"

RectangleTop="120"

RectangleWidth="100"

RectangleHeight="100" />

수평, 수직 및 원형 계조를 생성하기 위한 간략화된 신택스는 다음과 같은데, GradientType StartColor EndColor, 여기서 GradientType는 VerticalGradient, HorizontalGradient 또는 RadialGradient이다. StartColor 및 EndColor는 (청색과 같이) 미리 정의된 컬러 명칭 또는 16진값들일 수 있다.

수직 계조는 시작 및 종료점들이 수직선을 형성하는 선형 계조이다. 유사하게, 수평 계조는 시작 및 종료점들이 수평선을 형성하는 선형 계조이다. 개발자들은 다음의 신택스를 사용하여 그들 자신의 2개 컬러 선형 계조를 명시적으로 기술할 수 있는데, LinearGradient StartPoint EndPoint StartColor EndColor, 여기서 StartPoint 및 EndPoint는, 시작 및 종료 좌표들이며, 각 좌표는 0.1,0.1 및 0.5,0.5와 같이, 0에서 1 사이의 x 및 y값들의 쌍으로 표현된다. 이들 값들은 시작점 또는 종료점의 상대적 위치를 나타낸다. 0.5,0.5의 종료점은 채워진 영역의 우측으로 50퍼센트, 및 영역의 상부로부터의 진로의 50%에 위치될 수 있으며, 이는 포인트를 형상 중간에 배치시킨다.

다음의 예에서, Rectangle 엘리먼트의 Fill 속성은 선형 계조를 사용하여 명시적으로 설정된다.

다음의 예는 간략화된 신택스를 사용하여 2개 컬러 원형 계조로 영역을 채우는 방법을 설명한다.

Fill 속성 이외에, 계조들은, Shape 엘리먼트들의 Stroke와 같이, 객체의 윤곽을 채우는데 사용될 수도 있다.

드로잉 브러시(drawing brush)는 다른 형상 및 브러시들의 조합들로 형상을 채우거나 제어하는 것이 가능하다. 일반적인 Shape 엘리먼트들과 달리, DrawingBrush 내부의 형상들은 엘리먼트 트리(element tree) 내의 엘리먼트들이 아니다. 대신, 그들은 구문 분석되고 미디어 플레이어에 의해 직접 렌더링된다. 이로 인해, 사용자 인터페이스의 일부가 많은 형상들로 구성되는 경우에 상당히 개선된 성능을 발휘할 수 있다.

드로잉 브러시는 TileBrush의 한 유형이다. 섹션은, 드로잉 브러시가 자신의 출력 영역을 채우는 방법을 개발자가 제어하는데 사용할 수 있는 추가 특징들에 대한 정보를 제공한다.

ImageBrush는 비트맵 이미지로 영역을 채운다. 다음의 예는 Canvas의 배경으로서 이미지를 렌더링하기 위해 ImageBrush를 사용하는 방법을 나타낸다.

이미지 브러시는 TileBrush의 한 유형이다. 섹션은 이미지가 출력 영역을 채우는 방법을 개발자들이 제어하는데 사용할 수 있는 추가 특징들에 대해 정보를 제공한다.

DrawingBrush 및 ImageBrush는 타일 브로시들의 유형들이다(그들은 TileBrush 클래스로부터 유래한다). 따라서, 그들은, 영역이 채워지는 방법을 개발자들이 세세히 제어할 수 있게 하는 특징들의 일반 세트이다. 예를 들면, 단일의 스트레치된 이미지로 영역을 단지 채우는 대신, 개발자들은 패턴을 생성하는 일련의 이미지 타일로 영역을 채울 수 있다.

타일 브러시는 컨텐트로 채워진 하나 이상의 타일을 기술한다. ImageBrush는 비트맵 이미지로 타일을 채우는 타일 브러시이다. DrawingBrush는 드로잉으로 타일을 채우는 타일 브러시이다.

타일 브러시는 개발자에게 2개 레벨의 제어를 제공한다; 개발자는 브러시의 컨텐트가 타일을 채우는 방법을 제어하고 개발자는 브러시의 타일이 영역을 채우는 방법을 제어할 수 있다. 디폴트로서, 타일 브러시는 단일 타일로 출력 영역을 채우고, 브러시의 컨텐트가 스트레치되어 해당 타일을 채운다. 개발자가 이러한 디폴트 거동을 오버라이드(override)할 수 있게 하는 소정의 속성은 Stretch, Viewport, 및 ViewBox 속성이다. Stretch 속성(또한 도 18을 참조하여 아래에 기술됨)은 브러시의 컨텐트가 타일을 채우는 방법을 정의한다. ViewPort는 브러시 타일의 크기 및 위치를 정의하고, VoewBox 속성은 브러시의 컨텐트의 크기 및 위치를 결정한다.

Stretch 속성은 타일 브러시의 컨텐트가 스트레치되어 타일을 채우는 방법을 제어한다. Stretch 속성은 Stretch 나열에 의해 정의되는 다음의 값을 수용한다.

None : 브러시의 컨텐트가 타일을 채우도록 스트레치되지 않는다.

Fill : 브러시의 컨텐트가 타일에 맞게 스케일된다. 컨텐트의 높이 및 폭이 독립적으로 스케일되기 때문에, 컨텐트 본래의 종횡비는 보존되지 않는다. 즉, 브러시의 컨텐트는 출력 타일을 완전히 채우도록 휘어질(warp) 수 있다.

Uniform : 브러시의 컨텐트가 스케일되어, 타일 내에 완전히 맞추어진다. 컨텐트의 종횡비는 보존된다.

UniformToFill : 브러시의 컨텐트가 스케일되어 컨텐트의 본래의 종횡비를 보존하면서 출력 영역을 완전히 채운다.

HorizontalAlignment 및 VerticalAlignment 속성들은 타일 브러시의 컨텐트 가 타일 내에 정렬되는 방법을 결정한다. HorizontalAlignment 속성은 HorizontalAlignment 나열에 의해 정의된, 다음의 값들 Left, Center, 및 Right를 수용한다. VerticalAlignment 속성은 VerticalAlignment 나열에 의해 정의된, 다음의 값들 Top, Center 및 Bottom을 수용한다.

ViewPort 속성은 브러시의 타일의 크기 및 위치를 결정한다. ViewPortUnits 속성은 절대 좌표 또는 상대 좌표를 사용하여 ViewPort가 지정되는지 여부를 결정한다. 좌표가 상대적이면, 출력 영역의 크기에 상대적이다. 포인트 (0,0)은 출력 영역의 상부 좌측 코너를 나타내고, (1,1)은 출력 영역의 하부 우측 코너를 나타낸다. ViewPort 속성을 지정하기 위해 절대 좌표를 사용하려면, ViewPortUnits 속성을 Absolute로 설정한다.

다음의 예에서, 이미지는, 100의 폭 및 높이를 갖고, 그 상부 좌측 코너가 (0,0)을 갖는 타일을 생성하는데 사용된다.

브러시의 컨텐트의 크기 및 위치는 ViewBox 속성을 사용하여 지정될 수 있다. 타일 브러시의 타일이 출력 영역을 완전히 채우지 않는 경우, TileMode 속성은 나머지 출력 영역이 채워지는 방법을 지정한다. TileMode 속성이 TileMode 나열에 의해 정의되는 다음의 값들을 수용한다:

None : 베이스 타일만 그려진다.

Tile : 베이스 타일이 그려지고 나머지 영역은, 한 타일의 우측 에지가 다음 타일의 좌측 에지에 인접하고, 하부 및 상부에 대해서도 유사하게 베이스 타일을 반복함으로써 채워진다.

FlipX : Tile과 동일하나, 타일들의 교호 열(column)들이 수평적으로 플립(flip)된다.

FlipY : Tile과 동일하나, 타일들의 교호 행(row)들이 수직적으로 플립된다.

FlipXY : FlipX와 FlipY의 조합

서로 다른 타일 모드들은 도 19를 참조하여 아래에 기술된다.

도 17을 참조하여 아래에서 기술된, NineGridBrush는 비트맵 이미지로 영역을 채우는 점에서 이미지 브러시와 매우 유사하다. 그러나, NineGridBrush의 경우, 이미지는 9개 영역들 또는 4개의 경계에 의한 그리드들로 분할된다. NineGridBrush 페이지를 참조하면, 보다 많은 정보를 얻을 수 있다.

도 3 및 4는, 비주얼로 칭해지는 베이스 객체(base object)를 포함하는, 예시적인 장면 그래프(300, 400)를 각각 도시한다. 비주얼 객체, 또는 간단히 Visuals는, 선, 텍스트, 및 이미지와 같은 그래픽 컨텐트를 위한 컨테이너(container)이다. 도 5의 비주얼 클래스의 객체 상속에서 나타나는 바와 같이, 그래픽 컨텐트를 직접적으로 포함하지 않으나 자식(child) Drawing Visual Objects를 포함하는 Visual인, ContainerVisual을 포함하여, 몇개의 상이한 비주얼 객체가 존재한다. 자식 DrawingVisual 객체는 다른 DrawingVisual 객체에 부가되기보다는 ContainerVisual에 부가된다. 이로인해, 개발자들은 재생성하고 그 후 전체 드로 잉 컨텍스트를 렌더링하지 않고 개별적인 비주얼 객체들에 대한 속성을 변경하고 설정할 수 있으며, 또한 컨테이너 객체에 대한 속성을 클립핑 및 변환하기 위해 액세스할 수 있다. ContainerVisual 객체는 내포될 수 있다(nested).

DrawingVisual은 그래픽 컨텐트를 포함할 수 있는 Visual이다. 이러한 Visual은 많은 드로잉 메소드를 노출한다. DrawingVisual의 자식 객체는 제로-기반(zero-based), 제트차(z-order) 공간에서 조직화된다. RetainedVisual은 드로잉에 사용될 수 있는 "보유 명령어 스트림(retained instruction stream)"을 도입하는 Visual이다. 보다 간단하게, RetainedVisual은 개발자가 비주얼의 컨텐트를 보유하고 단지 필요할때만 그것을 다시 그리게 한다. RenderOpen을 호출하고 드로잉을 위해 DrawingContext를 이용함으로써, DrawingVisual과 같이, RetainedVisual을 강제적으로 사용하는 것이 가능하다. RetainedVisual은 검증 콜백 기능(validation callback functionality)과 InvalidateVisual 메소드를 제공한다. 검증 기능을 사용하기 위해, 사용자는, RetainedVisual 또는 그로부터 파생되는 클래스 상에 IRetainedRender 인터페이스를 구현한다.

도 5로 돌아가서, 또 다른 비주얼은, 장면 그래프의 비주얼 장면 내의 자식 비주얼로서, 레거시 Microsoft^® Win32^® 제어 또는 윈도우를 호스트하는데 사용되는 Visual인, HwndVisual(505)이다. 특히, 레거시 프로그램은, 종래의 그래픽 기술에 기초하여 자식 HWnd(또는 유사한 것)에 그리는 WM_PAINT 메소드를 통해 여전히 동작한다. 새 그래픽 프로세싱 모델에서 그러한 프로그램을 지원하기 위해, HwndVisual은, Hwnd가 장면 그래프에 포함되고 부모(parent) 비주얼이 재배치됨에 따라 이동될 수 있다. 이차원과 삼차원 세계들 사이를 연결할 수 있는 삼차원 (3D) 비주얼과 같은, 기타 유형의 비주얼도 실현가능한데, 예를 들면, 카메라와 같은 뷰(view)는 삼차원 세계로의 뷰를 가지는 이차원 비주얼을 통해 가능하다.

도 3에 도시된 바와 같이, VisualManager(304)는 비주얼 트리를 매체에 연결하는 객체를 포함한다. VisualManager는 비주얼 데이터 구조(루트 비주얼(302))과 해당 데이터가 렌더링되는 타겟 사이의 유지된 접속을 확립하고, 둘 사이의 차이를 추적할 수 있게 한다. VisualManager(304)는 윈도우 메시지들을 수신하고 드로잉 좌표 내의 점을 장치 좌표로 변환하거나 그 반대로 변환하기 위한 메소드를 제공한다.

통상적인 애플리케이션은 앞서 언급된 미국 특허 출원 번호 제10/401,717에 기술된 바와 같이, "XAML"로 레이아웃를 정의하고 C#로 일부 드로잉 동작들을 지정함으로써 그래픽을 그릴 수 있다. 개발자는 Shape 엘리먼트들을 생성하거나 또는 프리미티브를 갖는 Geometry 클래스를 사용하여 지오메트리들을 그릴 수 있다. 다음의 시나리오에서, 코드는 Canvas 밑에 놓여 있는 Visual에 타원을 그리는 것을 나타낸다.

대신, Visual API를 사용하면, 개발자는 Visual에 직접 그릴 수 있다(그렇지 않으면 레이아웃 엘리먼트에 의해 액세스된다).

DrawingVisual 객체의 컨텐트를 렌더링하기 위해, 애플리케이션은 통상적으로 DrawingVisual 상에 RenderOpen 메소드를 호출한다. RenderOpen은, 애플리케이션이 드로잉 동작들을 수행할 수 있는 DrawingContext를 반환한다. Visual의 컨텐트를 소거하기 위해, 애플리케이션은 DrawingContext 상에 Close를 호출한다. 애플리케이션이 Close를 호출한 후, DrawingContext는 더 이상 사용될 수 없다.

다음의 코드는, Ellipse 형상보다 Geometry 객체를 사용하여, DrawingVisual에 타원(앞선 예에서와 같은 타원)을 그린다. 이러한 예는 DrawingVisual을 생성 하고, DrawingVisual의 DrawingContext를 얻고, 타원을 그리기 위해 DrawingContext의 DrawingGeometry 메소드를 호출한다. 주의할 점은, Visual을 최상위 레벨 객체의 비주얼 트리 - 이 경우 윈도우임 - 에 추가하여야 한다는 것이다.

다음의 예는 앞선 예에 대해 ContainerVisual에 유사한 타원들을 추가함으로써 더 구축된다. 주의할 점은, 이러한 예는, 명확히 하기 위해 장황하다는 것이다. ContainerVisual을 사용하면, 장면 객체를 체계화하는데 도움이 될 수 있고, 개발자가, 그려진 일상적인 컨텐트로부터 히트-테스트(hit-test) 또는 검증을 수행 하는 Visual 객체(RetainedVisual 객체들)를 분리할 수 있게 하고, 컨텐트를 불필요하게 다시 그리는 것을 최소화할 수 있게 한다.

RetainedVisual은 DrawingVisual과 유사하지만, 비주얼 컨텐트를 선택적으로 다시 그릴 수 있게 한다. 그 명칭이 의미하는 바와 같이, RetainedVisual은 매체 상에 다수의 외관에 대한 컨텐트를 보유할 수 있다. 또한, 이는 콜백(callback)과 검증 기능을 제공한다. 이러한 기능은, 컨텐트의 재-랜더링(re-rendering)에 대해 개발자에게 보다 큰 제어를 제공하여 렌더링 수행에 도움을 줄 수 있다.

기본적인 레벨에서, 사용자는 DrawingVisual과 매우 유사한 RetainedVisual을 생성하고 사용할 수 있다. 즉, 사용자는 RenderOpen을 호출하고 DrawingContext를 얻을 수 있다. 대안적으로, 사용자는 RetainedVisual 상에 IRetainedVisual 인터페이스를 구현할 수 있다. 그렇게 함으로써, 사용자는, 그래픽 시스템이 IRetainedVisual.Render 호출에서 렌더링될 컨텐트에 대해 RenderBounds 속성 내에 설정된 값을 경계로 사용할 것이라는 것을 보장한다.

장면을 렌더링할 때, 그래픽 시스템은 임의의 자식 비주얼을 검사할 것이다. RenderBounds 속성 값이, 특정 Visual의 컨텐트가 장면을 렌더링하는데 필요할 것이라는 것을 나타내면, 시스템은 IRetainedVisual을 호출하여 Visual의 컨텐트를 채우고, 메모리에 이미 존재하는 임의의 컨텐트를 교체할 것이다. 또한, 애플리케이션이 InvalidateVisual을 직접 호출하여 Visual로부터 컨텐트를 플러시(flush)할 것이다. 애플리케이션이 RetainedVisual 상에 IRetainedRender를 구현하지 않는다면, InvalidateVisual에 대한 임의의 호출은 예외를 쓰로우(throw)할 것이다.

다음의 코드는 RetainedVisual 상에 IRetainedRender를 구현하는 클래스를 인스턴스화하고 거기에 그려 넣는다.

본 발명의 나머지 그래픽 시스템과 같이, Visual API는, 관리되는 API이고, 강한 자료형(strong typing)과 쓰레기 수집(garbage collection)을 포함하여, 관리되는 코드의 전형적인 특징을 사용한다. 또한, 렌더링을 위한 하드웨어 가속의 능력도 이용한다. 기존의 관리되지 않는 애플리케이션들로 개발자의 작업을 수용하기 위해, Visual API는 본 그래픽 시스템과 Microsoft Windows^® Graphic Device Interface (GDI) 사이에 제한적 상호운용성(interoperability)을 제공한다.

이러한 상호운용성을 통해, 개발자는 HwndVisual 객체를 사용하여 Visual 인 식 애플리케이션에서 GDI 기반 윈도우를 호스트하고, 본 발명의 드로잉과 랜더링에 기초한 주제화(theming) 및 제어를 기록하나, 여전히 레거시 GDI 애플리케이션, 및 하드웨어 가속 및 컬러 모델을 포함하여 새로운 렌더링 특징을 이용하는 Modify GDI HWND 기반 애플리케이션에서 작동한다.

HwndVisual은 Visual 인식 애플리케이션 내의 Win32 컨텐트의 호스팅을 가능하게 한다. 도 5에서 도시한 바와 같이, HwndVisual은 ContainerVisual로부터 상속한다. 주의할 점은, 동일한 HwndVisual 내에 GDI와 새로운 드로잉 모델을 혼합하는 것은 불가능하다는 것이다. 대신, 이러한 비주얼은 제한된 범위의 레거시 제어에서 더 유용할 수 있다. 다음의 예는 HwndVisual 내에 제어를 생성하고 이를 비주얼 트리에 추가하는 것을 나타낸다.

다른 객체에 대해, Visual 내에 일단 호스트된 제어에 변환과 다른 속성 변화를 적용할 수 있다.

도 3에서 도시된 바와 같이, 최상위 레벨(또는 루트)의 Visual(302)은 Visual 관리기 객체(304)에 접속되며, 이는 또한 윈도우(HWnd)(306), 또는 프로그램 코드에 대해 그래픽 데이터가 출력되는 유사한 유닛과(예를 들면, 핸들(handle)를 통해) 관계를 가진다. VisualManager(304)는 최상위 레벨 비주얼을 (그리고 해당 Visual의 임의의 자식을) 해당 윈도우(306)로 그리는 것을 관리한다. 도 6은 본 발명에서 기술되는 그래픽 시스템의 객체 모델에서의 객체 세트(600)중 하나로서 VisualManager를 나타낸다.

그리기 위하여, Visual 관리기(304)는, 디스패쳐(dispatcher)(308)에 의해 스케줄된 대로 장면 그래프를 처리(예를 들어, 트래버스(traverse) 또는 전송)하고, 앞서 언급한 미국 특허 출원에서 일반적으로 기술된 바와 같이, 그 대응 윈도우(306)에 대한 하위 레벨 컴포넌트(218)(도 2)에 그래픽 명령어 및 다른 데이터를 제공한다. 장면 그래프 처리는 통상적으로, 하위 레벨의 컴포넌트(218) 및/또는 그래픽 서브시스템(222)의 리프레시 속도보다 상대적으로 느린 속도로 디스패처(308)에 의해 스케쥴될 것이다.

도 3은 최상위 레벨(루트)의 Visual(302) 밑에 계층적으로 배열된 다수의 자식 Visual(310-314)를 나타내며, 그들중 일부는, 각각, 예를 들어 Intruction Lists와 다른 Visual들을 포함하는, 연관된 명령어 리스트들(318,319)로 드로잉 컨텍스트(316, 317)(그들의 일시적 특성을 나타내기 위해 점선 박스로 도시됨)를 통해 실장되는 것으로 나타난다. Visual들은 다른 속성 정보를 포함할 수도 있다. 일반적으로, 도 5에서 표현된 바와 같이, 베이스 비주얼 클래스에 대한 대부분의 액세스는 IVisual 인터페이스를 통하고, Visual은, DependencyObject로부터 파생된 다. 다른 드로잉 프리미티브들중에서, 명령어 리스트는 ImageData에 대한 참조를 포함할 수 있다. 그 후, 해당 ImageData는 드로잉 내용을 버리거나 또는 SurfaceVisualRenderer(대안적으로 ImageDataVisualRenderer)를 가짐으로써 직접 변경되거나 갱신될 수 있다.

Visual들은 클립(clip), 불투명도, 및 설정될 수 있거나 및/또는 Get 메소드를 통해 판독될 수 있는 가능한 다른 속성들을 제공함으로써 서비스를 제공한다. 이외에, 비주얼은 히트 테스트에 참여하는 방법을 제어하는 플래그들을 가진다. Show 속성은 비주얼을 보여주거나/숨기는데 사용되는데, 예를 들면, 거짓일 경우, 비주얼은 보이지 않고, 그렇지 않으면 비주얼은 보일 것이다. 더우기, (Visual API 계층 또는 엘리먼트층에서의 엘리먼트) 이러한 객체들은 계층적으로 존재한다. 좌표계 시스템은 이러한 계층구조를 통해 아래로 상속된다. 이러한 방식으로, 부모는, 렌더링 패스를 수정하고, 해당 부모의 자식들에게 적용되는 좌표 변환을 추진한다.

비주얼에 대한 변환은 해당 비주얼과 관련된다. 즉, 부모의 IVisual 인터페이스 상에서 [Get|Set]ChildTransform을 통해 설정된다.

주의할 점은, 비트맵에서와 같이, 좌표 변환은 모든 것에 일률적인 방식으로 적용될 수 있다는 것이다. 유의할 점은, 이러한 것이 변환들이 비트맵에는 항상 적용된다는 것을 의미하지 않으나, 렌더링되는 것이 변환에 의해 동등하게 영향을 받는다는 것을 의미한다는 것이다. 예로서, 사용자가 1인치 넓이의 둥근 팬으로 원을 그리고 나서 그 원에 대해 X 방향의 스케일 2를 적용하면, 팬은 좌우로 2인치 넓이가 될 것이고 상부와 하부에서는 단지 1인치 넓이가 될 것이다. 이것은 때때로, (지오메트리에만 영향을 끼치는 지오메트리 스케일 또는 골격(skeleton)에 대조적으로) 합성(compositing) 또는 비트맵 변환이라 부른다. 도 8은, 스케일링 변환을 나타내는 도면으로, 좌측에 변환되지 않은 이미지(800)를 나타내고, 우측에 불균일(non-uniform) 스케일을 갖는 변환된 이미지(802)를 나타내고 있다. 도 9는 스케일링 변환을 나타내는 도면으로, 좌측에 변환되지 않은 이미지(800)를 나타내고, 우측에 지오메트리 스케일링을 갖는 변환된 이미지(904)를 나타내고 있다.

비주얼의 좌표 변환에 대하여, TransformToDescendant는 포인트를 기준 비주얼로부터 후손 비주얼(descendant visual)로 변환한다. 이 포인트는, 기준 비주얼의 후-변환(post-transformation) 좌표 공간으로부터 후손 비주얼의 후-변환 좌표 공간으로 변환된다. TransformFromDescendant는 포인트를 부모 체인 위의 후손 비주얼로부터 기준 비주얼로 변환한다. 이 포인트는 후손 비주얼의 후-변환 좌표 공간으로부터 기준 비주얼의 후-변환 좌표 공간으로 변환된다. 사용자는 후손으로/으로부터, 및 임의의 자의적인 비주얼로부터/로 Matrix를 획득할 수 있다. Visual의 컨텐트의 바운딩 박스(bounding box)를 결정하는데 사용될 수 있는 2개의 속성, 즉, 후손의 바운딩 박스인 DescendantBounds, 및 컨텐트의 바운딩 박스인 ContentBounds를 결정하는데 사용될 수 있는 2개의 속성이 이용가능하다. Union을 이들에 제공함으로써, 전체 경계들을 제공한다.

클립(Clip) 속성은 비주얼의 클립핑(clipping) 영역을 설정 (및 획득)한다. 임의의 지오메트리(지오메트리 클래스는 도 10에 나타냄)은 클립핑 영역으로서 사 용될 수 있으며, 클립핑 영역은 후-변환 좌표 공간에 적용된다. 일 구현에서, 클립핑 영역에 대한 디폴트 설정은 널(null), 즉, (-∞, -∞)으로부터 (+∞, +∞)까지의 무한대의 대형 클립핑 사각형으로 인식될 수 있는, 비클립핑(non-clipping)이다.

Opacity 속성은, 비주얼로부터 불투명도 값을 취득/설정하여, 불투명도 값 및 선택된 블렌딩 모드(blending mode)에 기초하여 비주얼의 컨텐트가 드로잉 표면 상에서 블렌딩된다. BlendMode 속성은 사용되는 블렌딩 모드를 설정 (또는 취득)하는데 사용될 수 있다. 예를 들어, 컬러 = 알파 * 전경 컬러(foreground color) + (1.0 - 알파) * 배경 컬러와 같이, 선형 알파 블렌딩이 모드로서 설정되면, 불투명도(알파) 값은 0.0 내지 1.0 사이에서 설정될 수 있다. 특별한 효과 속성과 같은 다른 서비스는 예를 들어, 흐림(blur), 단색 등의 비주얼 내에 포함될 수 있다.

(변환, 불투명도, 및 클립을 포함하는) 다양한 서비스들이 드로잉 컨텍스트에 푸싱 및 팝(pop)될 것이고, 각 푸시 호출에 대해 적절한 팝 호출이 있는 한, 푸시/팝 동작들은 내포될 수 있다.

PushTransform 메소드는 변환을 푸시한다. 후속 드로잉 동작들은 푸시된 변환에 대해 실행된다. 팝 호출은 일치하는 PushTransform 호출에 의해 푸시된 변환을 팝한다:

void PushTransform(Transform transform);

void PushTransform(Matrix matrix);

void Pop();.

유사하게, PushOpacity 메소드는 불투명도 값을 푸시한다. 후속 드로잉 동작은 특정 불투명도 값으로 임시 표면 상에 렌더링된 후에 장면 내부로 합성된다. Pop( )는 매칭되는 PushOpacity 호출에 의해 푸시된 불투명도를 팝한다:

void PushOpacity(float opacity);

void PushOpacity(FloatAnimation opacity);

void Pop( );.

PushClip 메소드는 클립핑 지오메트리를 푸시한다. 후속 드로잉 동작들은 지오메트리에 대해 클립핑된다. 클립핑은 후-변환 공간에 적용된다. Pop( )은 매칭 PushClip 호출에 의해 푸시된 클립핑 영역을 팝한다:

void PushClip(Geometry clip);

void Pop();.

주의할 점은, 팝 동작들이 푸시와 매칭되는 한, 푸시 동작들은 임의로 내포될 수 있다. 예를 들어, 다음이 유효하다:

ProxyVisual은 예를 들어 컨테이너 비주얼 아래의 장면 그래프에 한 번 이상 부가될 수 있는 비주얼이다. ProxyVisual에 의해 참조되는 임의의 비주얼이 루트 로부터 다중 경로에 의해 도달될 수 있기 때문에, 판독 서비스(TransformToDescendant, TransformFromDescendant 및 HitTest)는 ProxyVisual을 통해 수행되지 않는다. 필수적으로, 임의의 비주얼로부터 비주얼 트리의 루트까지 하나의 표준(canonical) 경로가 존재하고 그 경로는 임의의 ProxyVisuals을 포함하지 않는다.

도 4는 ContainerVisual 및 DrawingVisual (및 기타)이 장면 그래프에 관련되고 Instruction Lists의 형태로, (예를 들어, 대응 드로잉 컨텍스트들 내에) 연관된 데이터를 갖는 예시적인 장면 그래프(400)를 나타낸다. ContainerVisual은 Visuals을 위한 컨테이너이고, ContainerVisuals은 서로 내포될 수 있다. ContainerVisual의 자식들은 ContainerVisual이 구현되는 IVisual 인터페이스상에서 메소드들을 통해 조작될 수 있다. VisualCollection 내의 Visuals의 순서는 Visuals가 렌더링되는, 즉 Visuals가 뒤에서 앞으로, 가장 낮은 인덱스로부터 가장 높은 인덱스로 렌더링 되는 (페인팅 순서) 순서를 결정한다.

상술한 바와 같이, 비주얼들은 Geometry, ImageSource 및 MediaData를 포함하여, 다양한 드로잉 프리미티브로 그들의 드로잉 컨텍스트들을 실장(populating)함으로써 그려질 수 있다. 더 나아가, 이러한 전체 스택을 통해 공유되는 클래스들 및 자원들 세트가 존재한다. 이것은 Pens, Brushes, Geometry, Transforms 및 Effects를 포함한다. DrawingContext 추상 클래스는 DrawingVisual, ValidtionVisual, ImageData 등을 실장하는데 사용될 수 있는 드로잉 동작 세트를 나타낸다. 바꾸어 말하면, 드로잉 컨텍스트 추상 클래스는 드로잉 동작 세트를 나 타내며, 각 드로잉 동작에 대해 두가지 메소드들이 존재하는데, 하나는 인수(argument)들로서 상수로 취하는 것이고, 다른 하나는 인수들로서 애니메이터(animator)를 취하는 것이다.

Geometry는 스트로크나 채움없이, 벡터 그래픽 골격을 정의하는 클래스의 한 유형(도 10)이다. 각 지오메트리 객체는 단순한 형태(LineGeometry, EllipseGeometry, RectangleGeometry), 복합적인 단일 형태(PathGeometry) 또는 지정된 결합 동작(예를 들어, 통합, 교차 등)으로 GeometryCollection을 형성하는 그러한 형상의 리스트이다. 이러한 객체들은 도 10에 나타난 바와 같이 클래스 계층구조를 형성한다.

도 11에 도시된 바와 같이, PathGeometry는 Figure 객체의 컬렉션이다. 다시, Figure 객체의 각각은 실질적으로 도형의 형상을 정의하는 하나 이상의 Segment 객체로 구성된다. Figure는 세그먼트 집합을 정의하는 Geometry의 서브섹션(sub-section)이다. 이러한 세그먼트 컬렉션은 2차원 Segment 객체들의 단일하게 연결된 시리즈이다. Figure는 정의된 영역을 갖는 폐쇄된 형상 또는 닫힌 영역이 없는 곡선을 정의하는 Segment들의 연결된 시리즈일 수 있다.

도 12에 도시된 바와 같이, 지오메트리(예를 들어, 사각형)이 그려지면, 이하에 설명되는 바와 같이, 브러시 또는 펜이 지정될 수 있다. 더우기, 펜 객체는 브러시 객체도 갖는다. 브러시 객체는 평면을 그래픽으로 채우는 방법을 정의하고, 브러시 객체들의 클래스 계층구조가 존재한다. 이것은 도 12에서 사각형 및 브러시 명령어들 및 파라미터들을 포함하는 비주얼이 처리될 때 결과로 나타내는 채워 진 사각형(1202)에 의해 표시된다. Pen 객체는 아래에서 설명된 바와 같이 Width, LineJoin, LineCap, MiterLimit, DashArray, 및 DashOffset에 대한 속성들과 함께 Brush 상에 보유된다. 또한, 아래에서 설명하는 바와 같이, (계조 및 9개의 그리드와 같은) 소정 유형의 브러시가 스스로 크기조절된다. 사용될 경우, 이들 브러시들의 크기는 바운딩 박스(bounding box)로부터 얻어지는데, 예를 들어, 브러시에 대한 GradientUnit/DestinationUnits이 RelativeToBoundingBox로 설정되면, 그려지는 프리미티브의 바운딩 박스가 사용된다. 그들 속성이 Absolute로 설정되면, 그 후, 좌표 공간이 사용된다.

본 발명의 그래픽 객체 모델은, 일반적으로 화소들로 평면을 커버하는 개념을 지향하는 Brush 객체 모델을 포함한다. 브러시의 유형들의 예들은 도 13의 계층구조에 표시되며, Brush 베이스 클래스 아래에, Gradient Brush, NineGridBrush, SolidColorBrush 및 TileBrush을 포함한다. GradientBrush는 LinearGradient 및 RadialGradient 객체를 포함한다. DrawingBrush 및 ImageBrush는 TileBrush로부터 도출된다. 클래스의 대안적인 배열이 실행가능한데, 예를 들어 TileBrush에서 도출되는 것이 ImageBrush, VisualBrush, VideoBrush, NineGridBrush 및 Drawing Brush가 될 수 있다. 주의할 점은, Brush 객체는 사용될 때 좌표 시스템에 관련되는 방법 및/또는 사용되는 형상의 바운딩 박스와 관계되는 방법을 인식할 수 있다는 것이다. 일반적으로, 크기 등의 정보는 브러시가 그려지는 객체로부터 유추될 수 있다. 특히, 많은 브러시 유형은 그들의 파라미터중 일부를 지정하기 위해 좌표계를 사용한다. 이 좌표계는 브러시가 적용되는 형상의 간단한 바운딩 박스에 대한 것으로 정의될 수 있거나, 또는 브러시가 사용되는 때에 활성화되는 좌표 공간에 대한 것일 수 있다. 이들은 각각 RelativeToBoundingBox 모드 및 Absolute 모드로 알려져 있다.

SolidColorBrush 객체는 식별된 평면을 솔리드 컬러(sold color)로 채운다. 컬러의 알파 성분이 있으면, Brush 베이스 클래스의 대응하는 불투명도 속성과 승산 방식(multuplicative way)으로 결합한다. 다음은 SolidColorBrush 객체의 예를 나타낸다:

GradientBrush 객체, 또는 단순히 계조는 계조 채움(gradient fill)을 제공하고, 소정 종류의 진행을 따라 컬러들을 지정하는, 계조 스톱(gradient stop) 세트를 지정함으로써 그려진다. 계조는 감마 2.2 RGB 컬러 공간에서 계조 스톱들 간의 선형 보간을 수행함으로써 그려진다. 다른 감마 또는 다른 컬러 공간(HSB, CMYK 등)을 통한 보간도 실행될 수 있는 대안이다. 2가지 유형의 계조 객체는 선 형 및 원형(radial) 계조를 포함한다.

일반적으로, 계조는 계조 스톱의 리스트로 구성된다. 이들 계조 스톱 각각은 (포함된 알파값을 갖는) 컬러와 오프셋을 포함한다. 계조 스톱들이 지정되지 않으면, 지정된 브러시가 전혀 없는 것처럼, 브러시는 솔리드 투명 블랙으로 그려진다. 하나의 계조 스톱만이 지정되면, 브러시는 솔리드 컬러로서 지정된 하나의 컬러로 그려진다. 다른 자원 클래스들처럼, 계조 스톱 클래스(이하의 표의 예)는 "Changeable Class and Pattern to Provide Selective Mutability In Computer Programming Environments"라는 제목의 미국 특허 출원에 설명된 바와 같이, 변경 가능한 클래스로부터 도출되고, 그 결과 선택적으로 변화할 수 있다.

계조는 계조 스톱 세트를 지정함으로써 그려진다. 이러한 계조 스톱은 소정 종류의 진행에 따라 컬러를 지정한다. 현재 지원되는 두가지 형태의 계조, 즉, 선형과 원형 계조가 존재한다. 계조는 지정된 색깔 공간에서 계조 스톱들 간의 보간을 행함으로써 그려진다.

계조는 계조 스톱들의 리스트로 이루어진다. 이러한 계조 스톱 각각은 (포함된 알파값을 갖는) 컬러 및 오프셋을 포함한다. 지정된 계조 스톱이 없다면, 브러시는 (마치 지정된 브러시가 없는 것처럼) 투명하게 그려진다. 단지 하나의 계조 스톱만 지정되면, 브러시는 솔리드 컬러로서 지정된 하나의 컬러로 그려진다. 0에서 1의 범위(0.0...1.0)에서 오프셋을 갖는 임의의 계조 스톱은, 범위 (-∞...0.01) 내의 가장 큰 스톱, 범위 (1.0...+∞) 내의 가장 작은 스톱으로 고려된다. 고려된 스톱 세트가 0에서 1까지의 범위 바깥의 스톱을 포함한다면, 이 스톱 에서 발생하는 보간된 컬러를 나타내는 0 (및/또는 1)에서 암시적 스톱이 도출된다. 또한, 두개 이상의 스톱이 동일한 오프셋에 설정된다면, 해당 오프셋에서 (보간되기 보다) 하드 천이(hard transition)가 발생한다. 스톱들이 부가되는 순서는 이 오프셋에서의 행위를 결정한다. 추가되는 첫번째 스톱은 해당 오프셋 이전의 유효 컬러이고, 설정되는 마지막 스톱은 해당 스톱 이후의 유효 컬러이며, 이러한 오프셋에서의 추가적인 스톱은 무시된다.

이러한 클래스는 다른 자원 클래스와 같이 Changeable이다:

SolidColorBrush와 같이, 이것은 애니메이션 컬렉션들 내에 Changeables를 내포한다.

GradientSpreadMethod 열거형(enum)은 계조가 지정된 벡터 또는 공간의 외부에 그려져야 하는 방법을 지정한다. 종단 컬러(처음과 마지막)가 잔여 공간을 채우는데 사용되는 Pad, 스톱들이 역순으로 반복적으로 재생되어 공간을 채우는 Reflect, 및 공간이 채워질 때까지 스톱들이 순서대로 반복하는 Repeat를 포함하여, 세개의 가능한 값이 존재한다. 이러한 유형의 속성들에 대한 디폴트 값은 Pad이다:

도 14 및 도 15는 (컬러가 아닌 흑백이기는 하지만) 소정의 GradientSpreadMethod 예들을 제공한다. 각각의 형상은 백색으로부터 회색으로 진행하는 선형 계조를 갖는다. 솔리드 선은 계조 벡터를 나타낸다.

일반적으로, LinearGradientBrush는 선형 계조로 영역을 채우는데 사용된다. 선형 계조는 선을 따라 계조를 정의한다. 선의 종점은 선형 계조의 StartPoint 및 EndPoint 속성들에 의해 정의된다. 디폴트로, 선형 계조의 StartPoint는 채워지는 영역의 상부 좌측 코너인 (0,0)이고 EndPoint는 채워지는 영역의 하부 우측 코너인 (1,1)이다. 도 15에서 표시한 바와 같이, 디폴트 값을 사용하여, 결과적인 계조 내의 컬러는 대각선 경로를 따라 보간된다. 계조의 시작과 끝점으로부터 형성된 검은 선은 계조의 보간 경로를 하이라이트하기 위해 본원에서 추가되었다.

ColorInterpolationMode 열거형은 계조 내에서 컬러들에 대한 보간 모드를 정의한다. 두 가지 옵션은 PhysicallyLinearGamma10과 PerceptuallyLinearGamma22 이다.

이것은 추상 베이스 클래스이다.

Changeables 부분에서 기술된 바와 같이, Changeables에 대해 GradientBrush는 복합형이다. 왜냐하면, GradientStops 속성 자체가 Changeable들을 보유하기 때문이다. 이는, GradientBrush가 보호된 메소드들 MakeUnchangeableCore(), 및 PropagateEventHandler(), 뿐만 아니라 Changeable 서브클래스들이 구현하는 ColorCore()도 구현할 필요가 있다는 것을 의미한다. 예를 들면, 컬렉션을 구성하는 GradientStops 무효 조합들이 존재한다면 ValidateObjectState()를 구현하는 것 을 선택할 수도 있다.

LinearGradient는 벡터를 따라 선형 계조 브러시를 지정한다. 개별적인 스톱은 해당 벡터를 따라 컬러 스톱들을 지정한다.

LinearGradient에 대한 마크업은, 오프셋 0과 1에서, 두개의 컬러 스톱을 갖는 LinearGradient의 규격을 가능하게 한다. "LinearGradient" 버젼이 사용된다면, 시작점과 종료점이 각각 지정된다. "HorizontalGradient" 가 사용된다면, 시작점은 0,0으로 설정되고 종료점은 1,0로 설정된다. "VerticalGradient"가 사용된다면, 시작점은 0,0으로 설정되고 종료점은 0,1로 설정된다. 이러한 경우들에서, RelativeToBoundingBox인, 디폴트 MappingMode가 사용된다.

RadialGradient는 프로그래밍 모델에서의 선형 계조와 유사하다. 그러나, 선형 계조는 계조 벡터를 정의하기 위한 시작점과 끝점을 갖지만, 원형 계조는 계조 행동을 정의하기 위한 초점과 함께 원을 갖는다. 원은 계조의 끝점을 정의한다 - 즉, 1.0에서의 계조 스톱은 원의 원주의 컬러를 정의한다. 초점은 계조의 중심을 정의한다. 0.0에서의 계조 스톱은 초점에서의 컬러를 정의한다. 도 16은 백색으로부터 회색으로 진행하는 RadialGradient를 (흑백으로) 나타낸다. 바깥 원은 계조 원을 나타내고, 솔리드 도트는 초점을 나타낸다. 이러한 계조는 Pad로 설정 된 SpreadMethod를 갖는다.

RadialGradient에 대한 마크업은, 오프셋 0과 1에서, 각각 두개의 컬러 스톱들을 갖는 RadialGradient의 설정을 가능하게 한다. 디폴트 반지름이 0.5이며, RelativeToBoundingBox인, 디폴트 MappingMode가 사용된다:

TileBrush는 타일과 타일이 영역을 채워야 하는 수단을 기술한 논리를 포함하는 추상 베이스 클래스이다. TileBrush의 서브클래스는 컨텐트를 포함하고, 무한한 평면을 채우는 방식을 논리적으로 정의한다.

Stretch 열거형은 ViewBox(소스 좌표 공간)가 ViewPort(목표 좌표 공간)에 매핑되는 방법을 기술하는데 사용된다. 이는 TileBrush에서 사용된다:

도 18은 스트레치 예들을 제공한다. 이러한 예들에서, 컨텐츠는 상부/좌측에 배치된다.

TileMode 열거형은 Tiles에 의해 공간이 채워지는지 여부 및 그 방법을 기술하는데 사용된다. TileBrush는 베이스 Tile이 존재하는 장소를 정의한다. 나머지 공간은 TileMode 값들에 기초하여 채워진다.

도 19는 TileMode 예들을 제공한다. 각 예에서 상부 최좌측 타일은 베이스 타일이다. 이러한 예들은 None, Tile, FlipX, FlipY 및 FlipXY를 나타낸다.

VerticalAlignment 열거형은, 컨텐트가 컨테이너 내부에서 수직으로 배치되는 방법을 기술하는데 사용된다.

HorizontalAlignment 열거형은 컨텐트가 컨테이너 내에서 수평적으로 배치되는 방법을 기술하는데 사용된다.

TileBrush 속성들은 무한 평면의 사각형 일부를 타일(ViewBox)로 선택하고, 채워지는 영역 내의 베이스 Tile이 될 목표 사각형(ViewPort)을 기술한다. 잔여 목표 영역은 TileMode 속성에 기초하여 채워질 것이고, 이는 잔여 공간을 채우기 위해 원래 타일이 복제되는지 여부 및 그 방법을 제어한다:

TileBrush의 컨텐트는 고유의 경계를 가지지 않고, 무한 평면을 효과적으로 기술한다. 이러한 컨텐트는 자신의 좌표 공간 내에 존재하고, TileBrush에 의해 채워지는 공간은, 적용 시점의 로컬 좌표 공간이다. 컨텐트 공간은 ViewBox, ViewPort, Alignment 및 Stretch 속성들에 기초하여 로컬 공간으로 매핑된다. ViewBox는 컨텐트 공간에서 지정되고, 이 사각형은 ViewPort 사각형으로 매핑된다.

ViewPort는, 이러한 Brush에 대한 베이스 타일을 생성하면서, 최종적으로 컨텐츠가 그려질 위치를 정의한다. ViewPortUnits의 값이 Absolute라면, ViewPort의 값은 적용시의 로컬 공간에 있는 것으로 간주된다. 대신, ViewPortUnits의 값이 RelativeToBoundingBox라면, 그 후 ViewPort의 값은, 0,0이 페인팅되고 있는 객체의 바운딩 박스의 상부/좌측 코너이고 1,1이 같은 박스의 하부/우측 코너인 좌표 공간 내에 있는 것으로 간주된다. 예를 들면, 100,100에서 200,200까지 그려진, 채워지고 있는 RectangleGeometry를 고려하자. 그 후, ViewPortUnits가 Absolute라면, (100,100,100,100)의 ViewPort는 전체 컨텐트 영역을 기술할 것이다. ViewPortUnits가 RelativeToBoundingBox라면, (0,0,1,1)의 ViewPort는 전체 컨텐트 영역을 기술할 것이다. ViewPort의 Size가 비어 있고 Stretch가 None이 아니라면, 이러한 브러시는 아무 것도 렌더링하지 않는다.

ViewBox는 컨텐트 공간 내에서 지정된다. 이 사각형은 Alignment 속성과 Stretch 속성에 의해 결정된대로 ViewPort 내에 맞도록 변환된다. Stretch가 None이면, 어떠한 스케일링도 그 컨텐츠에 적용되지 않는다. Stretch가 Fill이면, 그 후, ViewBox는 X와 Y 모두 독립적으로 ViewPort와 동일한 크기로 스케일링된다. Stretch가 Uniform 또는 UniformToFill이면, 논리는 유사하지만 X와 Y차원이 균일하게 스케일링되어, 컨텐츠의 종횡비가 보존된다. Stretch가 Uniform이면, ViewBox는 ViewPort의 크기와 동일한 보다 더 제한된 크기를 갖도록 스케일링된다. Stretch가 UniformToFill이면, ViewBox는 ViewPort의 크기와 동일한 보다 덜 제한된 크기를 갖도록 스케일된다. 이것을 생각할 수 있는 다른 방식은, Uniform과 UniformToFill 모두 종횡비를 보존하지만, Uniform은 (ViewBox에 의해 커버되지 않은 ViewPort 일부를 잠재적으로 내버려두면서) 전체 ViewBox가 ViewPort 내에 있음을 보장하고, UniformToFill은 (잠재적으로 ViewBox의 일부를 ViewPort 외부에 있게 하면서) 전체 Viewport가 ViewBox에 의해 채워지는 것을 보장한다. ViewBox의 영역이 비어 있으면, 어떠한 Stretch도 적용되지 않을 것이다. 정렬은 여전히 발생하고, "포인트" ViewBox를 배치할 것이다.

일단, (ViewPortUnits에 기초하여) ViewPort가 결정되고 ViewBox의 목표 크기가 (Stretch에 기초하여) 결정되면, ViewBox는 Viewport 내에 위치될 필요가 있다. ViewBox가 ViewPort와 같은 크기라면(Stretch가 Fill이거나 또는 다른 세개의 Stretch 값들 중 하나로 발생한다면), 그 후, ViewBox는 ViewPort와 동일하도록 Origin에 위치된다. 그렇지 않으면, HorizontalAlignment와 VerticalAlignment가 고려된다. 이들 속성들에 기초하여, ViewBox는 X와 Y 차원으로 정렬된다. HorizontalAlignment가 Left이면, ViewBox의 좌측 에지는 ViewPort의 Left 에지에 위치될 것이다. Center이면, ViewBox의 중심은 ViewPort의 중심에 위치될 것이며, Right이면, 우측 에지들이 만날 것이다. 그 프로세스는 Y 차원에 대하여 반복된다.

ViewBox가 Empty이면 설정되지 않은 것으로 간주된다. 설정되지 않았다면, ContentUnit가 고려된다. ContentUnits가 Absolute이면, 어떠한 스케일링 또는 오프셋도 발생하지 않으며, 컨텐츠는 아무런 변환없이 ViewPort에 그려진다. ContentUnits가 RelativeToBoudingBox이면, 컨텐트 원점은 ViewPort Origin에 정렬되고, 그 컨텐츠는 객체의 바운딩 박스의 폭과 높이에 의해 스케일링된다.

TileBrush에 의해 공간을 채우는 경우, 컨텐츠는 상기와 같이 ViewPort로 매핑되고 ViewPort에 클립핑된다. 이는 채움을 위한 베이스 타일을 형성하며, 공간의 여백은 Brush의 TileMode에 기초하여 채워진다. 설정된 경우, Brush의 변환이 적용되는데, 이것은 다른 매핑, 스케일링, 오프셋 등의 이후에 발생한다.

VisualBrush는 Visual에 의해 지정되는 컨텐츠를 가진 TileBrush이다. 이러한 Brush는 복합 패턴을 생성하는데 사용될 수 있거나, 또는 장면의 다른 부분들의 컨텐츠의 추가 카피들을 그리는데 사용될 수 있다.

ImageBrush는 ImageData에 의해 지정된 컨텐츠를 가진 TileBrush이다. 이러한 Brush는 Image로 공간을 채우는데 사용될 수 있다.

VideoBrush는 VideoData에 의해 지정되는 컨텐츠를 가진 TileBrush이다. 이러한 Brush는 Video로 공간을 채우는데 사용될 수 있다.

NineGridBrush는 그 컨텐츠 이미지로 객체 바운딩 박스를 항상 채우는 Brush이고, 이미지 스트레치는 순수하게 비주얼 스케일을 통해 완성되지는 않는다. Image 소스는 네개의 경계에 의한 9개의 사각형으로 나누어진다(그래서 명칭이 NineGrid임). 이들 9개의 지역 각각에서 이미지의 컨텐츠는, 객체 바운딩 박스를 채울때까지 0, 1 또는 2 크기로 스케일된다. 각 섹션이 스케일되는 크기들은 본 도면에서 볼 수 있다. 도 17은 Top, Left, Bottom 및 Right 경계에 의해 정의된 9개의 그리드를 도시하는 네가지 유형으로, 제1 인스턴스(instance)(1702)에서 제2 인스턴스(1704)까지 확대되는, NineGrid의 개념을 나타낸다. 각 그리드 정사각형 내의 화살표들은 그 컨텐츠가 ViewPort 크기를 충족하도록 스트레치될 크기(들)을 보여준다.

상기에서 그려진 9개의 그리드 지역 이외에, 선택적인 "제10" 그리드가 존재한다. 이는, ViewPort 내의 중심에 있고 스케일되지 않는 추가 이미지의 형태를 취한다. 이것은 버튼의 중심 등에 형상를 배치시키는데 사용될 수 있다. 이러한 "제10 그리드" 는 그리프(glyph)라 불리고, GlyphImageData 속성에 의해 나타난다:

주의할 점은, 경계 멤버들이 이미지 화소들 내의 이미지의 에지로부터 산입된다는 것이다.

Pen은 공간과/Geometry를 스트로크하는 방법을 기술하는 Brush와 다른 파라미터를 취하는 객체이다. 개념적으로, Pen은 Geometry로부터 스트로크 영역을 어떻게 만드는지를 기술한다. 새 영역은 Geometry, Pen의 Thickness, PenLineJoin, PenLineCap 등의 에지들에 기초하여 만들어진다. 일단 이 영역이 만들어지면, Brush로 채워진다.

PenLineCap은 스트로크된 선의 끝이 그려지는 방법을 결정한다.

PenDashCap은 대시(dash)되고, 스트로크된 선 내의 각 대시의 끝부분들이 그려지는 방법을 결정한다.

PenLineJoin은 선을 스트로킹할때 조인트(joint)가 그려지는 방법을 결정한다.

DashArrays 클래스는 일반적이고 잘 알려진 대시 스타일들에 접근을 제공하는 정적 속성들을 포함한다.

도 13에 나타낸 다른 브러시 객체는 VisualBrush 객체이다. VisualBrush는 그 컨텐츠가 Visual에 의해 지정된 TileBrush이다. 이러한 Brush는 복합 패턴을 생성하는데 사용되거나, 또는 장면의 다른 부분들의 컨텐츠의 추가 카피들을 그리는데 사용될 수 있다.

개념적으로, VisualBrush는 비주얼이, 채움으로서 반복되고 타일(tile) 방식으로 그려지는 방식을 제공한다. 이것은 도 12에서, 해당 원 형상이 사각형(1222)을 채우고, 단일 원 형상(1220)을 지정하는 비주얼 (및 임의의 자식 비주얼)을 참 조하는 비주얼 브러시에 의해 표현된다. 따라서, VisualBrush 객체는, 해당 브러시가 그려지는 방법을 정의하기 위해 비주얼을 참조하는데, 이는 비주얼들에 대해 다중 사용의 한 유형을 도입한다. 이러한 방식으로, 프로그램은 임의의 그래픽 '메타파일(metafile)'을 이용하여 브러시 또는 펜을 통해 영역을 채울 수 있다. 이것은 임의의 그래픽을 저장하고 사용하기 위한 압축된 형태이므로, 그래픽 자원의 기능을 한다.

일 구현에서, VisualBrush의 컨텐츠는 고유(intrinsic) 경계가 없으며, 무한 평면을 효과적으로 기술한다. 이들 컨텐츠는 자신의 좌표 공간에 존재하며, VisualBrush에 의해 채워지는 공간은 적용 시의 로컬 좌표 공간이다. 컨텐츠 공간은 ViewBox, ViewPort, Alignment, 및 Stretch 특성에 기초하여 로컬 공간으로 매핑된다. ViewBox는 컨텐츠 공간 내에 지정되며, 이 사각형은 (Origin 및 Size 속성들에 의해 지정되는 바와 같이) ViewPort 사각형으로 매핑된다.

ViewPort는, 이러한 Brush에 대한 베이스 타일을 생성하여, 컨텐츠가 최종적으로 그려지는 위치를 정의한다. DestinationUnit의 값이 UserSpaceOnUse이면, Origin 및 Size 속성이 적용 시의 로컬 공간 내에 있는 것으로 간주된다. 반면에, DestinationUnit의 값이 ObjectBoundingBox이면, Origin 및 Size는, 브러시되는 객체의 바운딩 박스의 상부/좌측 코너가 0,0이며, 동일 박스의 하부/우측 코너가 1,1인 좌표 공간 내에 있는 것으로 간주된다. 예를 들면, 100,100에서 200,200까지 그려져 채워지는 RectangleGeometry를 고려하자. 이러한 예에서, DestinationUnit이 UserSpaceOnUse이면, 100,100의 Origin과 100,100의 Size가 전체 컨텐츠 영역을 기술한다. DestinationUnit이 ObjectBoundingBox이면, 0,0의 Origin과 1,1의 Size는 전체 컨텐트 영역을 기술한다. Size가 비어 있으면, 이러한 브러시는 아무 것도 렌더링하지 않는다.

ViewBox는 컨텐츠 공간 내에 규정된다. 이 사각형은 Alignment 속성과 Stretch 속성에 의해 결정된대로 ViewPort 내에 맞도록 변환된다. 스트레치가 None이면, 어떠한 스케일링도 컨텐츠에 적용되지 않는다. 스트레치가 Fill이면, ViewBox는 X와 Y 모두 독립적으로 스케일되어 ViewPort와 동일한 크기가 된다. 스트레치가 Uniform 또는 UniformToFill이면, 논리는 유사하지만 X와 Y 차원이 균일하게 스케일링되어 컨텐츠의 종횡비가 보존된다. Stretch가 Uniform이면, ViewBox는 ViewPort의 크기와 동일한 보다 더 제한된 차원를 갖도록 스케일된다. Stretch가 UniformToFill이면, ViewBox는 ViewPort의 크기와 동일한 보다 덜 제한된 차원을 갖도록 스케일된다. 즉, Uniform과 UniformToFill 모두 종횡비를 보존하지만, Uniform은 (ViewBox에 의해 커버되지 않은 ViewPort의 일부를 잠재적으로 내버려두면서) 전체 ViewBox가 ViewPort 내에 있음을 보장하고, UniformToFill은 (잠재적으로 ViewBox의 일부를 ViewPort 외부에 있게 하여) 전체 ViewPort가 ViewBox에 의해 채워지는 것을 보장한다. ViewBox가 비어 있으면, 어떠한 스트레치도 적용되지 않는다. 주의할 점은, 정렬은 여전히 행해지며, "포인트" ViewBox가 배치된다는 것이다.

도 18은, 스트레치가 "none"으로 설정되는 경우 타일(1800)을 포함하여, 다양한 스트레치 설정으로 렌더링된 그래픽의 단일 타일(1800)을 나타낸다. 타일 (1802)은 스트레치가 'Uniform'으로 설정되는 경우의 표현이고, 타일(1804)은 스트레치가 'UniformToFill'로 설정되는 경우이며, 타일(1806)은 스트레치가 'Fill'로 설정되는 경우이다.

(DestinationUnit에 기초하여) 일단 ViewPort가 결정되고 ViewBox의 크기가 (스트레치에 기초하여) 결정되면, ViewBox는 ViewPort 내에 위치될 필요가 있다. ViewBox가 ViewPort와 동일한 크기이면(스트레치가 Fill이거나 또는 다른 3개의 스트레치 값들 중의 하나가 발생하는 경우), ViewBox는 ViewPort와 동일하도록 Origin에 위치된다. 그렇지 않으면, HorizontalAlignment와 VerticalAlignment가 고려된다. 이들 속성들에 기초하여, ViewBox는 X와 Y차원 모두로 정렬된다. HorizontalAlignment가 Left이면, ViewBox의 좌측 에지는 ViewPort의 Left 에지에 위치될 것이다. Center이면, ViewBox의 중심은 ViewPort의 중심에 위치될 것이며, Right이면, 우측 에지들이 만날 것이다. 그 프로세스는 Y차원에 대하여 반복된다.

ViewBox가 (0,0,0,0)이면, 설정되지 않은 것으로 간주되고, 그에 따라 ContentUnits가 고려된다. ContentUnits가 UserSpaceOnUse이면, 어떠한 스케일링 또는 오프셋도 발생하지 않으며, 컨텐츠는 아무런 변환없이 ViewPort에 그려진다. ContentUnit이 ObjectBoudingBox이면, 컨텐츠 원점은 ViewPort Origin에 정렬되고 컨텐츠는 객체의 바운딩 박스의 폭과 높이에 의해 스케일된다.

VisualBrush에 의해 공간을 채우는 경우, 컨텐츠는 상기와 같이 ViewPort로 매핑되고 ViewPort에 클립핑된다. 이는 채움을 위한 베이스 타일을 형성하며, 나머지 공간은 Brush의 TileMode에 기초하여 채워진다. 최종적으로, 설정된 경우, Brush의 변환이 적용된다 - 이것은 모든 다른 매핑, 스케일링, 오프셋 등 이후에 발생한다.

TileMode 열거형(enumeration)은 Brush에 의해 공간이 채워질지의 여부 및 그 방법을 기술하는데 사용된다. 타일화(tiled)될 수 있는 Brush는 타일 사각형을 정의하며, 이 타일은 채워지는 공간 내에 기본 위치를 가진다. 나머지 공간은 TileMode 값에 기초하여 채워진다. 도 19는 "None"(1900), "Tile"(1902), "FlipX"(1904), "FlipY"(1906) 및 "FlipXY"(1908)를 포함하여, 다양한 TileMode 설정을 갖는 예시적인 그래픽 표현을 제공한다. 다양한 예시적인 그래픽에서의 상부 최좌측 타일은 베이스 타일을 포함한다.

도 20은 VisualBrush에서 타일들에 대해 정의되는 VisualBrush Grid를 나타낸다. 처음 원은 단순한 그리드이고, 두번째는 x 방향으로 47의 Skew를 갖는 Transform을 가진다. 도 21은 이것이 이미지로 채워지는 것을 나타낸다.

도 13으로 돌아가서, 이미지 브러시는 타일 브러시로부터 파생되고 따라서 타일화될 수 있다. NineGridBrush는 크기에 기초하여 이미지가 휘어진 것을 제외하고 ImageBrush와 유사하다. 본질적으로, NineGridBrush는 Stretch의 커스텀 타입(custom type)으로 간주될 수 있는데, 여기서 이미지의 소정의 부분의 스트레치되는 반면, 다른 부분(예를 들어, 경계)은 그렇지 않다. 따라서, ImageBrush에서 이미지의 Size는 단순한 스케일을 야기하는 반면, NineGridBrush는 원하는 크기까지의 불균일 스케일을 생성할 것이다. 스케일되지 않은 영역들에 대한 유닛들은, 브러시가 적용되는 때의 사용자 유닛들이며, 이는 ContentUnit(NineGridBrush에 대 해 존재하면)은 UserUnitOnUse로 설정되는 것을 의미한다. Brush의 변환 속성은 효과적으로 사용될 수 있다. 유의할 점은, 이미지의 에지로부터 경계 멤버가 산입된다는 것이다.

일반적으로 상술한 바와 같이, 본 발명의 그래픽 객체 모델은, Transform 베이스 클래스 아래의, 도 7의 계층 구조에서 표현된 변환 유형들을 포함하는, Transform 객체 모델을 포함한다. 변환을 구성하는 이처럼 상이한 유형의 컴포넌트들은 TransformList, TranslateTransform, RotateTransform, ScaleTransform, SkewTransform, 및 MatrixTransform을 포함할 수 있다. 개별적인 속성은 애니메이트될 수 있는데, 예를 들어, 프로그램 개발자가 RotateTransform의 Angle 속성을 애니메이트할 수 있다.

2D 계산에 대한 행렬들은 3X3 행렬로 표현된다. 필요한 변환을 위하여, 완전한 3X3 행렬 대신에 단지 6개 값이 필요하다. 이들은 다음과 같이 명명되고 정의된다.

행렬과 포인트를 승산하면, 해당 포인트를 새 좌표계로부터 이전 좌표계로 변환한다.

변환은 임의의 레벨에 내포될 수 있다. 새 변환이 적용될 때마다 현재의 변 환 행렬에 대해 후 승산(post-multiplying)한 것과 동일하다.

API 내의 대부분의 장소는 Matrix를 직접적으로 취하지 않으나, 대신에 애니메이션을 지원하는 Transform 클래스를 사용한다.

벡터 그래픽을 위한 마크업 언어 및 객체 모델

본 발명의 일 태양에 따르면, 사용자 프로그램들 및 도구들이 API 계층(212)(도 2)의 세부사항에 대한 특정 지식을 필요로 하지 않고 장면 그래프 데이터 구조(216)와 상호 작용할 수 있게 하기 위해, 마크업 언어와 엘리먼트 객체 모델이 제공된다. 일반적으로, 엘리먼트 객체 모델을 통해 벡터 그래픽을 표현하기 위한 단순한 마크업 기반 저작 포맷(authoring format)과 함께, 교환 포맷을 포함하는, 벡터 그래픽 마크업 언어가 제공된다. 이 언어를 통해, 마크업(예를 들면, HTML 또는 XML 유형의 컨텐트)이 프로그램될 수 있다. 그 후, 장면 그래프를 구축하기 위해, 마크업이 구문 분석되고 상술한 바와 같은 적절한 비주얼 API 계층 객체들로 번역된다. 이러한 보다 상위의 동작 레벨에서, 엘리먼트 트리, 속성 시스템 및 레이아웃 시스템은, 상당한 정도의 복잡도를 처리하도록 제공되어, 장면 설계자들이 복합 장면을 용이하게 설계할 수 있게 한다.

통상적으로, 벡터 그래픽 시스템은, 형상 및 다른 엘리먼트들의 세트, 일반 속성 시스템과의 통합, 그룹화 및 합성 시스템(grouping and compositing system), 및 2계층(엘리먼트 레벨과 자원 레벨) 접근을 일반적으로 제공하여, 사용자가 유연성과 성능요구를 매치하는 방식으로 프로그램할 수 있다. 본 발명의 일 태양에 대하여 계속 설명하면, 벡터 그래픽을 다루는 엘리먼트 객체 모델은 장면 그래프 객체 모델과 상관한다. 즉, 벡터 그래픽 시스템과 Visual API 계층은 엘리먼트 객체 모델 레벨에서 자원 세트를 공유하는데, 예를 들면, Visual API에서 그려질 경우 Brush 객체가 사용되고, 이는 또한 Shape에 대한 채움 속성의 유형이다. 따라서, 장면 그래프 객체들과 상관하는 엘리먼트들을 갖는 것 이외에, 마크업 언어는 다수의 프리미티브 자원(예를 들면, 브러시, 변형 등)을 Visual API 계층과 공유한다. 또한, 벡터 그래픽 시스템은 Visual API 계층의 애니메이션 성능을 노출 및 확장하는데, 이는 레벨들 간에 상당히 공유되는 것이다.

또한, 아래에서 설명하는 바와 같이, 벡터 그래픽 시스템은, 엘리먼트 레벨과 자원 레벨을 포함하는, 서로 다른 프로파일 또는 레벨들로 프로그램할 수 있다. 엘리먼트 레벨에서, 각각의 드로잉 형상은 페이지/스크린 내의 나머지 프로그래밍가능한 엘리먼트들과 동일한 레벨에서의 엘리먼트로서 표현된다. 이는, 형상이 레이아웃 시스템, 이벤트, 및 속성과 완전히 상호 작용한다는 것을 의미한다. 자원 레벨에서, 벡터 그래픽 시스템은 전통적인 그래픽 메타파일과 유사한, 순수한 자원 포맷으로 동작한다. 자원 레벨은 효율적이지만, 캐스케이드된 속성(cascaded properties), 이벤트 및 정밀한(fine-grained) 프로그램가능성에 대해 다소 제한적으로 지원한다. 따라서, 장면 설계자는 필요할 경우 프로그램가능성과 효율성의 균형을 맞추는 능력을 갖는다.

본 발명의 일 태양에 대하여 계속 설명하면, 일 구현에서, 자원 레벨 마크업이 VisualBrush로서 표현된다는 점에서 자원 레벨에서의 벡터 그래픽 시스템은 또한 비주얼 API 계층과 상관된다. 자원 마크업이 구문 분석될 때, 비주얼 객체가 생성된다. 비주얼 객체는 형상, 제어 및 엘리먼트 레벨에서의 다른 엘리먼트에 의해 이용될 수 있는 VisualBrush로 설정된다.

도 22는 엘리먼트 클래스 계층구조(2200)의 표현이다. 본 발명의 마크업 언어 객체 모델의 클래스는 음영 박스들을 통해 나타내며, 형상 클래스(2502), 이미지 클래스(2504), 비디오 클래스(2206), 및 캔버스 클래스(2208)를 포함한다. 형상 클래스의 엘리먼트는 사각형(2210), 복선(polyline)(2212), 다각형(2214), 경로(2216), 선(2218), 및 타원(2220)을 포함한다. 주의할 점은, 일부 구현에서는, 원 엘리먼트가 도 22의 점선 박스(2222)에 의해 표시되는 바와 같이 표시되지 않을 수 있지만, 본원에서는 다양한 예들을 위해, 원 엘리먼트(2222)을 설명할 것이다. 각 엘리먼트는 채움(속성) 데이터, 스트로크 데이터, 클립핑 데이터, 변환 데이터, 필터 효과 데이터 및 마스크 데이터를 포함하거나 또는 그들에 연관될 수 있다.

아래에 설명되는 바와 같이, 형상들은, 상속되고 캐스케이드된 프리젠테이션 속성(presentation property)으로 그려지는 지오메트리에 대응한다. 프리젠테이션 속성은 형상을 그리는데 필요한 펜과 브러시를 구성하는데 사용된다. 일 구현에 서, 형상은 다른 제어 엘리먼트와 같은 완전한 프리젠터(full presenter)들이다. 그러나, 다른 구현에서는, 캔버스 클래스(2508)가 형상에 대한 컨테이너(container)로서 제공될 수 있고, 형상은 캔버스 엘리먼트인 경우에만 그려질 수 있다. 예를 들면, 형상을 경량으로 유지하기 위해, 형상은 프리젠터가 첨부되는 것이 허용되지 않을 것이다. 대신, 캔버스는 첨부된 프리젠터들을 가지고 형상을 그린다. Canvas 엘리먼트는 아래에서 보다 상세히 설명된다.

아래에서도 설명되는 바와 같이, 이미지 클래스는 형상보다 특정적이고, 예를 들어 복합적일 수 있는 경계 데이터를 포함할 수 있다. 예를 들면, 경계는 최상부에 대해 하나의 색으로서 지정되고, 측면들은 다른 색으로 지정되며, 지정된 다양한 두께 및 기타 속성 세트를 가질 수 있다. 텍스트 또는 비디오와 같은 이미지 또는 유사한 박스형 엘리먼트에 대해 위치, 크기 회전 및 스케일이 설정될 수 있다. 주의할 점은, 이미지 및 비디오 엘리먼트가 존재할 수 있고, 캔버스 엘리먼트의 바깥에 나타낼 수 있으며, BoxedElement로부터 상속되어, 예를 들면 해당 엘리먼트으로부터 배경, 경계, 패딩(padding) 지원을 얻을 수 있다는 것이다.

비디오 엘리먼트는 표시된 엘리먼트 내에 비디오(또는 유사한 멀티미디어)가 재생될 수 있게 한다. 이러한 방식으로, 벡터 그래픽 시스템은, 텍스트, 2D 그래픽, 3D 그래픽, 애니메이션, 비디오, 및 정지 이미지와 오디오를 포함하는 멀티미디어에 대하여 무결절성으로 일관되는 API 계층에 대한 마크업 인터페이스를 제공한다. 이로 인해, 하나의 매체에서 작업하는 것을 배운 설계자가 다른 매체를 애플리케이션과 문서에 용이하게 통합할 수 있게 한다. 또한, 벡터 그래픽 시스템 은, 멀티미디어가 다른 엘리먼트와 동일한 방식으로 애니메이트되게 하고, 다시 설계자가 다른 엘리먼트와 같은 멀티미디어를 이용할 수 있게 하지만, 여전히 각각의 개별적인 미디어 유형의 코어 본래의 고유성을 희생시키지 않는다. 예를 들면, 설계자는 서로 다른 매체 유형에 대해 회전, 스케일링, 애니메이팅, 드로잉, 합성(compositing), 및 기타 효과를 위한 동일한 명명 방식을 이용함으로써, 설계자들은 매우 풍부한 애플리케이션을 용이하게 생성할 수 있을 뿐만 아니라 매우 효율적인 렌더링과 하부에 구축될 합성 구현을 고려할 수 있다.

도 23은 마크업 코드(2302)가 구문 분석기/번역기(2304)에 의해 해석되는 하나의 구현을 나타낸다. 일반적으로, 구문 분석기/번역기(2304)는 엘리먼트들을 엘리먼트 트리/속성 시스템(208)(도 2에도 도시됨)에 추가하고, 이러한 엘리먼트들에 프리젠터들을 첨부한다. 그 후, 레이아웃 시스템(210)은 첨부된 프리젠터를 갖는 엘리먼트 트리(210)을 취하고, 데이터를 객체들로로 번역하고 비주얼 API 계층(212)을 호출한다. 유의할 점은, 모든 엘리먼트가 번역될 필요는 없으며, 단지 첨부된 프리젠터를 갖는 엘리먼트들만이 번역된다는 것이다.

일반적으로, 마크업은, XAML 마크업에 대한 XML 방식이 통상적으로 다음과 같이 마크업 파일의 최상부에 선언되는, 객체들로 기술된다.

예를 들어, <Path> 태그가 사용되는 경우, 구문 분석기는 스키마(schema)를 사용하여 연관된 명칭공간(예를 들면, System.Windows.Shapes)를 찾아서 객체를 기술 및 구축한다.

일반적으로, 엘리먼트는 속성 시스템, 이벤팅 및 레이아웃/프리젠테이션 시스템에 참여하는 엘리먼트 계층 내의 객체이다. 구문 분석기는 태그를 발견하고 이러한 태그가 엘리먼트 또는 자원 객체를 정의하는데 도움이 되는지를 결정한다. VisualBrush의 특별한 경우, 동일한 태그들은, 이들 태그가 나타나는 것의 컨텍스트에 따라, 예를 들면, 복합 속성 신택스에 나타나는지 여부에 따라, 엘리먼트들로 해석될 수 있거나 또는 자원 객체들로도 해석될 수 있다.

본 발명의 일 태양에 따르면, 마크업 언어는 단순한 스트링 포맷 또는 복합 객체 표시를 포함하여, 자원을 기술하는 구분되는 방식을 제공한다. 단순한 스트링 포맷에서, 구문 분석기/번역기(2304)는 스트링을 적절한 비주얼 API 객체로 변환하는 유형 변환기(2308)를 사용한다. 예를 들면, 마크업의 후속 라인에서, Fill 속성값이 유형 변환기(2308)를 통해 브러시 객체로 변환될 수 있다:

쉽게 이해되는 바와 같이, 단순한 파라미터 스트링을 갖는 태그 기반 마크업의 이러한 인라인 선이 브러시 객체로 변환되는 것은 간단하고, 장면 설계자가 형상과 그 속성을 장면에 부가하는 간단한 방법을 제공한다.

그러나, 채움 속성이 단일 스트링에 맞추기에는 너무 복잡한 경우가 종종 있다. 이러한 상황에서, 마크업에서 인라인일 수 있는 복합 속성 신택스가 이러한 속성을 설정하기 위해 이용된다. 예를 들면, 다음의 복합 속성 신택스가, 컬러들을 (0에서 1 범위일 수 있는) 다양한 계조 스톱(gradient stop)으로 지정하여, 솔리드 컬러보다는 계조로 원을 채운다.

마크업에 인라인으로 제공되는 것 이외에, 자원 인스턴스(resource instance)는 (예를 들면, 로컬이거나 또는 원격 네트워크상에 있고 적절히 다운로드될 수 있는 파일 또는 마크업 내의) 다른 곳에 위치할 수 있고, (예를 들면, 텍스트 명칭, 참조 또는 기타 적절한 식별자와 같이) 명칭으로 참조된다. 이러한 방식으로, 장면 설계자는 복합 속성 신택스에 의해 기술되는 엘리먼트들을 포함하여, 장면에 걸쳐 엘리먼트 트리 내의 엘리먼트를 재사용할 수 있다.

구문 분석기는 필요시 유형 변환기(2308)를 액세스하고 또한 지정된 파라미터들을 객체 속성에 매칭함으로써 복합 속성 신택스의 마크업을 처리하여, 장면 설계자에 대한 복잡성을 처리한다. 따라서, 구문 분석기는 단지 객체만을 셋업하는 것이 아니라 객체에 대한 속성도 설정한다. 유의할 점은, 객체는 불변이기 때문에, 구문 분석기는 빌더(builder)를 실질적으로 인스턴트화(instantiate)하여 객체를 생성한다는 점이다.

동일한 렌더링 모델이 엘리먼트 레벨과 API 레벨 간에 공유되기 때문에, 많은 객체들은 본질적으로 동일하다. 이로 인해, 구문 분석/번역이 매우 효율적이게 되며, 또한 서로 다른 유형의 프로그래밍 언어(예를 들면, C#과 같은 언어)가 마크업으로부터 자신의 신택스로, 및 그 역으로 용이하게 변환될 수 있게 한다. 주의할 점은, 도 23에 나타낸 바와 같이, 다른 이러한 프로그래밍 언어(2310)가 엘리먼트 트리(208)에 엘리먼트들을 추가하거나 비주얼 API 계층(212)과 직접 인터페이스할 수 있다는 것이다.

또한, 도 23에 나타낸 바와 같이, 본 발명의 일 태양에 따르면, 동일한 마크업(2302)이 엘리먼트 레벨과 자원 레벨에서 프로그램하는 데에 이용될 수 있다. 상술한 바와 같이, 엘리먼트 레벨은 장면 설계자에게 완전한 프로그래밍가능성, 상속(예를 들면, 스타일-시트(style-sheet)형 특징)을 제공하는 속성 시스템의 사용법, 및 이벤팅(예를 들면, 이로 인해, 엘리먼트가 사용자 입력 이벤트에 응답하여 그의 외형, 위치 등을 변경하는 첨부된 코드를 가질 수 있음)을 부여한다. 그러나, 본 발명은 또한, 장면 설계자가 엘리먼트 트리와 레이아웃 시스템을 실질적으 로 단축시키고 비주얼 API 계층에 직접 프로그램할 수 있는 자원 레벨 메카니즘을 제공한다. 엘리먼트 레벨 특징이 필요치 않는 정적인 형상, 이미지 등의 많은 유형에서, 이는 적절한 객체를 출력하는 보다 효율적이고 경량의 방법을 제공한다. 이를 위해서, 구문 분석기는 '비주얼 브러쉬' 유형의 채움이 존재하는 때를 인식하고 자원 레벨 데이터(2312)를 갖는 API 계층(212)를 직접 호출하여 객체를 생성한다. 즉, 도 22에 나타낸 바와 같이, 자원 레벨 벡터 그래픽은 구문 분석되고 효율적인 방식으로 직접 저장되는 반면, 엘리먼트 레벨 벡터 그래픽은, 나중에 객체들로 번역이 필요한, 생성된 엘리먼트로 구문 분석된다.

예를 들면, 후속 마크업이 LinearGradient 객체에 대한 객체 모델로부터 직접 유도되고 VisualBrush로 바깥 원을 채운다. 해당 VisualBrush의 컨텐츠는 내부 마크업에 의해 정의된다. 주의할 점은, 이러한 신택스는 다양한 브러시, 변환 및 애니메이션을 표현하는데 일반적으로 사용된다는 것이다.

주의할 점은, 이러한 비주얼 브러시로 채워진 객체들은 효율적으로 저장되지만, 자원 레벨 데이터(또는 그에 의해 생성되는 객체)는 도 23에 일반적으로 나타낸 바와 같이 엘리먼트들과 엘리먼트 트리(208)의 일부에 의해 참조될 수 있다. 이를 위해서, 이러한 비주얼 브러시 자원들은 복합 속성 신택스를 통해 기술되는 다른 자원들과 유사하게 (예를 들면, 명칭, 참조 또는 기타 적절한 식별자를 사용하여) 명명되고 참조될 수 있다.

캔버스의 설명으로 돌아가서, 한 대안적 구현에서 상술한 바와 같이, 형상은 경량으로 유지될 수 있고 그 결과 캔버스에 포함될 것이 요구될 수 있다. 이러한 대안적 구현에서, 컨텐트가 랜더링되는 경우, 연관된 좌표계를 가지는 무한의 장치 독립적인 캔버스에 렌더링된다. 따라서, 캔버스 엘리먼트는 절대 좌표에 따라 컨텐트를 배치시킬 수 있다. 캔버스 엘리먼트는, 클립핑, 변환, 바람직한 종횡비 및 뷰포트(viewport)를 부모 공간으로 매핑하는 방법을 지정하는, 뷰포트를 선택적으로 정의할 수 있다. 뷰포트가 설정되지 않으면, 캔버스 엘리먼트는 단지 드로잉 프리미티브(drawing primitive)의 그룹화를 지정하고 변환, 불투명도 및 기타 합성 속성들을 셋업할 수 있다.

다음은 샘플 캔버스에 대한 마크업 예이다.

주의할 점은, 일 구현에서, 좌표들이 단위없이 지정되는 경우, 그 후 그들은 1인치의 1/96의 "논리적 화소(logical pixels)들"로 고려되고, 상기 예에서, 선은 200화소일 것이다. 좌표 이외에, 다른 속성은 폭, 높이, 수평 및 수직 정렬, 및 (디폴트는 설정되지 않거나 또는 (0,0,0,0)으로 설정되는데, 이는 조정이 이루어지 지 않음을 의미하고, 스트레치 및 정렬 속성은 무시되는, 사각형 유형의) ViewBox를 포함한다. 도 18-20을 참조로 일반적으로 상술되는 바와 같이, 다른 속성은 스트레치 - 이는 본래 크기를 보존하도록 지정되지 않은 경우임 - 를 포함하거나, 또는 1) 종횡비가 보존되지 않고 컨텐트가 상부/좌측/폭/높이에 의해 설정되는 경계들을 채우도록 스케일되는 채움(fill)을 지정할 수 있거나, 2) 이미지가 상부/좌측/폭/높이에 의해 설정되는 경계들에 맞을때까지 균일하게 크기가 스케일되는, 균일함(uniform)을 지정할 수 있거나, 또는 3) 상부/좌측/폭/높이에 의해 설정되는 경계들을 채우기 위해 균일하게 크기를 스케일하고 필요한 경우 클립(clip)하는, UniformFill을 지정할 수 있다.

하위 레벨의 객체 모델과 더욱 상관시키기 위하여, 변환 속성은 엘리먼트의 자식들에 대해 새로운 좌표 프레임을 설정하고, 클립 속성은 컨텐트가 캔버스 상에 그려질 수 있는 지역을 제한하며, 디폴트 클립핑 경로는 바운딩 박스(bounding box)로 정의된다. ZIndex 속성은 패널 내의 내포된(nested) 캔버스 엘리먼트들에 대한 렌더링 순서를 지정하는데 사용될 수 있다.

Viewbox는, 예를 들면 뷰포트의 길이 및 원점을 재정의함으로써 컨텐츠에 대해 새로운 좌표계를 지정한다. 스트레치는 이들 콘텐츠가 뷰포트로 맵핑되는 방법을 지정하는 것을 돕는다. ViewBox 속성의 값은, 예를 들면 여백 및/또는 콤마로 분리된 4개의 '단위없는(unitless)' 숫자 <min-x>, <min-y>, <width> 및 <height>의 리스트이고, Rect 유형이다. Viewbox 사각형은 바운딩 박스로 맵핑되는 사용자 공간 내의 사각형을 지정한다. 이것은 scaleX와 scaleY를 삽입하는 것과 동일하게 작용한다. 스트레치 속성은(옵션이 none이 아닌 경우) 그래픽의 종횡비를 보존하기 위한 추가적인 제어를 제공한다. 지정된 효과를 달성하기 위하여 주어진 엘리먼트의 후손에 대해 추가적인 변환이 이루어진다.

상기 예에서, 각 스트레치 규칙 하에서 상기 마크업 샘플 내의 사각형의 유효 결과는 다음과 같다:

None - (100, 600)에서 (200, 650)까지

Fill - (100, 100)에서 (900, 700)까지

Uniform - (100, ?)에서 (900, ?)까지 - 새로운 높이는 400이고, HorizontalAlign 및 VerticalAlign에 기초하여 중심에 위치된다.

UniformToFill - (?, 100)에서 (?, 700)까지 - 새로운 폭은 1200이고, HorizontalAlign 및 VerticalAlign에 기초하여 다시 중심에 위치된다.

캔버스 상에 변환이 있는 경우, 본질적으로 ViewBox로의 매핑을 (예를 들면 트리 내에) 상기와 같이 적용한다. 주의할 점은, 이러한 매핑은, 형상만이 아니라 캔버스 내의 임의의 엘리먼트, 예를 들면, 박스, 텍스트 등을 스트레치할 것이라는 것이다. 또한, 뷰박스가 지정되면, 캔버스는 더 이상 그 컨텐츠에 크기가 맞추어지지 않고 특정 크기를 갖는다는 점에 유의한다. y-width와 y-height도 지정되면, 스트레치/정렬 속성은 뷰박스를 지정된 폭 및 높이로 맞추는데 사용된다.

객체 모델 내의 엘리먼트들 각각은 'Clip' 속성이 적용될 수 있다. 일부 엘리먼트, 특히 형상에 대해, 이것은 공통 언어 런타임(runtime) 속성으로서 직접 노출되지만, 다른 것들(예를 들면, 대부분의 제어)에 대해서 이 속성은 DynamicProperty를 통해 설정된다.

일반적으로, 클리핑 경로는, 버튼이 클립되지 않은 형태(2402)와 클립핑 경로가 지정된 형태(2404)(점선은 클립핑 경로를 나타냄)로 도시되어 있는, 도 24에 일반적으로 표시된 바와 같이, 컨텐트가 그려질 수 있는 지역을 제한한다. 개념적으로, 현재 활성화된 클립핑 경로에 의해 경계가 정해지는 지역의 외측에 위치하는 드로잉의 어떤 부분도 그려지지 않는다. 클립핑 경로는, 클립핑 경로 바깥의 화소들이 0의 알파값을 갖는 검은색이고 클립핑 경로 안쪽에 있는 화소들이 (가능하면, 실루엣의 에지를 따른 안티-앨리어싱(anti-aliasing)을 제외한) 1의 알파값을 갖는 백색인 마스크로 간주될 수 있다.

클립핑 경로는, 인라인 또는 보다 일반적으로 자원 섹션에서 Geometry 객체에 의해 정의된다. 아래의 예에 나타낸 바와 같이, 엘리먼트에 대한 'Clip' 속성을 이용하여 클립핑 경로가 이용되거나 및/또는 참조된다:

주의할 점은, Clip을 애니메이팅하는 것은 변환을 애니메이팅하는 것과 유사하다는 것이다.

'Gemetry' 데이타, 및 Path 엘리먼트에 대한 Fill, Stroke 및 StrokeWidth와 같은 렌더링 속성을 지정함으로써 경로가 그려진다. 경로에 대한 예시적인 마크업이 다음과 같이 지정된다:

<Path Data = "M 100 100 L 300 100 L 200 300 z"

Fill = "red" Stroke = "blue" Strokewidth = "3" />

경로 'Data' 스트링은 Geometry 유형이다. 그려진 경로를 지정하는 더 상세하고 완전한 방법은, 상술한 바와 같이, 복합 속성 신택스를 이용하는 것이다. 마크업은 (아래 예에서와 같이) 상술한 Geometry 빌더 클래스들로 직접 제공된다.

경로 데이터 스트링은, 또한 경로 데이타 스트링에 대한 문법을 기술하기 위해 아래의 표현을 이용하여 기술된다.

* : 0 또는 그 이상

+ : 1 또는 그 이상

? : 0 또는 1

() : 그룹화

| : 택일문(alternatives)를 분리함

이중 따옴표가 문자들을 둘러쌈

다음은, 이러한 표시로 기술된 경로 데이타 스트링 정보를 나타낸다(주의할 점은, 일 구현에서, 엘리먼트 레벨에서의 속성 대신에, FillMode가 지정될 수 있다는 점이다).

이미지 엘리먼트(도 25)는, 완전한 파일의 컨텐츠가 현재 사용자 좌표계 내에서 소정의 사각형으로 렌더링될 것을 표시한다. (이미지 태그에 의해 표시되는) 이미지는, 다음의 예에서 제공되는 바와 같이, 'image/wvg'의 MIME 유형을 갖는 파일을 지칭하거나 또는 PNG 또는 JPEG와 같은 래스터 이미지 파일들을 지칭할 수 있다.

<Image Top="200" Left="200" Width="100px" Height="100px"

Source = "myimage.png">

</Image>

아래의 표는 이미지들에 대한 소정의 예시적인 속성들에 대한 정보를 제공한다.

명칭	유형	R/RW	디폴트 값	기술(Descrition)
Top	BoxUnit			Image의 상측에 대한 좌표
Left	BoxUnit			Image의 좌측에 대한 좌표
Width	BoxUnit			Image의 넓이
Height	BoxUnit			Image의 높이
Source	ImageData			Image의 소스
Dpi	Float		96(?)	사이징(sizing)을 위해 사용되는 타겟 DPI
HorizontalAlign	enum{ Left (?) Center (?) Right (?) }		Center
VerticalAlign	enum{ Top (?) Middle (?) Bottom (?) }		Middle
Stretch	enum Stretch { None, Fill, Uniform, UniformToFill }		None	None: 원래 크기의 보존 Fill: 종횡비는 보존되지 않고 컨텐트가 tlbh에 의해 설정된 경계들을 채우기 위해 스케일된다. Uniform: 이미지가 tlwh에 의해 설정된 경계들을 맞출때까지 크기를 균일하게 스케일함 UniformToFill: tlbh에 의해 설정되고 클립된 경계들을 맞출때까지 크기를 균일하게 스케일함
Readystate	enum { MetaDataReady, Loading, Loaded LoadError }
LoadCounter	Int	Read	Null	ReadyState가 Loading일때 증가하는 카운터
NAme	String			Image에 대한 교호적 텍스트

상술된 바와 같이, 형상들은, 상속 및 캐스케이드된 프리젠테이션 속성으로 그려진 지오메트리에 대응한다. 다음 표들은 상술한 기본 형상의 엘리먼트 (Rectangle, Ellipse, Line, Polyline, Polygon)에 대한 예시적 형상 속성을 제공한다. 주의할 점은, 이러한 기본 형상들은 스트로크 속성, 채우기 속성을 가질 수 있고, 클립 경로들로 사용될 경우, 상속 특성을 가질 수도 있고, 엘리먼트와 Resource 레벨 모두에 적용될 수 있다는 것이다.

이름	유형	R/RW	디폴트 값	기술
Fill	Brush	RW	null	rect의 상측에 대한 좌표
FillOpacity	Float	RW	1.0	rect의 좌측에 대한 좌표
Stroke	Brush	RW	null	rect의 넓이
StrokeOpacity	Float	RW	1.0	rect의 높이
StrokeWidth	BoxUnit	RW	1px	stroke의 넓이. 1px = 1인치의 1/96
FillRule	eunm { EvenOdd, NonZero }	RW	EvenOdd	FillRule는, 캔버스의 어떤 부분이 형상 내부에 포함되는지 결정하는데 사용되는 알고리즘을 나타낸다.
StrokeLineCap	eunm { Butt, Round, Square, Diamond }	RW	Butt	StrokeLineCap는 스트로크될 때 개방형 서브경로들의 끝에 사용될 형상을 지정한다.
StrokeLineJoint	eunm { Miter, Round, Bevel }	RW	Miter	StrokeLineJoint는, 스트로크될 때, 스트로크되는 경로의 코너들에서 사용되는 형상(또는 다른 벡터 형상들)을 지정한다.
StrokeMiterLimit	Float	RW	4.0	StrokeWidth에 대한 MiterLength의 비율에 대한 한계. 값은 >=1이 된다.
StrokeDashArray	PointList	RW	null	StrokeDashArray는, 경로들을 스트로크하는데 사용되는 대시들과 갭들의 형상을 제어한다. <dasharray>는, 사용자 유닛 내의 교호적인 대시 및 갭들의 길이들을 지정하는 공간의 리스트 - 또는 쉼표-분리된 <number>를 포함한다. 만약 홀수 값이 제공되면, 값들의 리스트는 짝수 값을 산출하기 위해 반복된다. 따라서, 스트로크-dasharray:5 3 2는 스트로크-dasharray: 5 3 2 5 3 2와 동등하다.
StrokeDashOffset	Point	RW		StrokeDashOffset는, 대시를 시작하기 위한 대시 패턴으로의 거리를 지정한다.
Transform	Transform	RW	null	Transform은 엘리먼트의 자식들을 위한 새 좌표 프레임을 설정한다.
Clip	Geometry	RW	null	Clip는, 페인트가 캔버스에 적용될 수 있는 지역을 제한한다. 디폴트 클립핑 경로는 바운딩 박스에 의해 정의된다.

다음은 사각형을 위한 예시적인 마크업 신택스이다

<Rectangle Top="600" Left="100" Width="100" Height="50"

Fill="red" Stroke="blue" StrokeWidth="10"/>

사각형은 객체 모델 내의 다음의 속성을 갖는다(주의할 점은, 사각형은 판독/기록이고, 0과 동일한 디폴트 값을 갖고, 상속을 지원하고 엘리먼트와 Resource 레벨 모두에 적용한다는 것이다).:

이름	유형	기술
Top	BoxUnit	rect의 상측에 대한 좌표
Left	BoxUnit	rect의 좌측에 대한 좌표
Width	BoxUnit	rect의 넓이
Height	BoxUnit	rect의 높이
RadiusX	BoxUnit	둥근 사각형에 대해, 타원의 X축 반경은 사각형의 모서리를 둥글게 하는데 사용된다. 음의 x축 반경이 지정되면, 반경의 절대값이 사용될 것이다.
RadiusY	BoxUnit	둥근 사각형에 대해, 타원의 Y축 반경은 사각형의 모서리를 둥글게 하는데 사용된다. 음의 Y축 반경이 지정되면, 반경의 절대값이 사용될 것이다.

다음은 원에 대한 예시적인 마크업 신택스이다:

<Circle CenterX="600" CenterY="100" Fill="red"

Stroke="blue" StrokeWidth="10"/>

원은 객체 모델에서 다음의 속성을 갖는다 (주의할 점은, 원은 판독/기록이고, 0과 동등한 디폴트 값을 갖고, 상속을 지원하고 엘리먼트와 Resource 레벨 모두에 적용한다는 것이다).:

이름	유형	기술
CenterX	BoxUnit	원의 중심의 X 좌표
CenterY	BoxUnit	원의 중심의 X 좌표
Radius	BoxUnit	원의 반경

다음은 타원에 대한 예시적인 마크업 신택스이다:

<Ellipse CenterX="600" CenterY="100" Fill="red"

Stroke="blue" StrokeWidth="10"/>

타원은 객체 모델에서 다음의 속성을 갖는다(주의할 점은, 타원은 판독/기록이고, 0과 동등한 디폴트 값을 가지며, 상속을 지원하고 엘리먼트와 Resource 레벨 모두에 적용된다는 것이다).

이름	유형	기술
CenterX	Coordinate	타원 중심의 X 좌표
CenterY	Coordinate	타원 중심의 Y 좌표
RadiusX	Length	타원의 X축 반경. 음의 X축 반경값이 지정되면, 반경의 절대값이 사용된다.
RadiusY	Length	타원의 Y축 반경. 음의 Y축 반경값이 지정되면, 반경의 절대값이 사용된다.

다음은 선에 대한 예시적인 마크업 신택스이다:

<Line x1="100" y1="300" x2="300" y2="100"

StrokeWidth="5" />

선은 객체 모델에서 다음의 속성을 갖는다 (주의할 점은, 선은 판독/기록이고, 0과 동등한 디폴트 값을 가지며, 상속을 지원하고 엘리먼트와 Resource 레벨 모두에 적용된다는 점이다).

이름	유형	기술
X1	BoxUnit	선의 시작 X 축 좌표. 디폴트 값은 "0".
Y1	BoxUnit	선의 시작 Y 축 좌표. 디폴트 값은 "0".
X2	BoxUnit	선의 끝의 X 축 좌표. 디폴트 값은 "0".
Y2	BoxUnit	선의 끝의 Y 축 좌표. 디폴트 값은 "0".

'Polyline'은 접속된 직선 세그먼트들의 세트를 정의한다. 전형적으로, 'Polyline'은 개방형 형상을 정의한다.

다음은 복선(polyline)에 대한 예시적인 마크업 신택스이다:

복선은 객체 모델에서 다음의 속성을 갖는다 (주의할 점은, 선은 판독/기록이고, 널(null)과 동등한 디폴트 값을 갖고, 상속을 지원하고 엘리먼트와 Resource 레벨 모두에 적용된다는 점이다).

이름	유형	기술
Points	PointCollection	Polyline을 구성하는 점들. 좌표값은 사용자 좌표계에 있음.

Polygon 엘리먼트는 접속된 직선 세그먼트들의 세트를 포함하는 폐쇄형 형상을 정의한다. 다음은 다각형(polygon)에 대한 예시적인 마크업 신택스이다:

다각형은 객체 모델에서 다음의 속성을 갖는다 (주의할 점은, 선은 판독/기록이고, 널(null)과 동등한 디폴트 값을 갖고, 상속을 지원하고 엘리먼트와 Resource 레벨 모두에 적용된다는 점이다).

이름	유형	기술
Points	PointCollection	Polygon을 구성하는 점들. 좌표값은 사용자 좌표계에 있음. 좌표의 홀수가 제공되면, 엘리먼트는 에러가 된다.

'복선(polyline)'과 '다각형(polygon)' 엘리먼트에서 점들을 지정하기 위한 문법은 다음 표기법으로 기술된다:

* : 0 또는 그 이상

+ : 1 또는 그 이상

? : 0 또는 1

() : 그룹화

| : 택일문(alternatives)를 분리함

이중 따옴표가 문자들을 둘러쌈

다음은 상기 표기법에 사용된 'Polyline'과 'Polygon' 엘리먼트들에서 점들의 지정을 기술한다.

결론

이상의 상세한 설명에서 보는 바와 같이, 장면 그래프와 인터페이스하는 다양한 메카니즘을 프로그램 코드에 제공하는 시스템, 방법, 엘리먼트/객체 모델이 제공된다. 시스템, 방법 및 객체 모델은 사용하기에 강력하고, 유연하며, 확장가능하면서도 간단하다.

본 발명에 다양한 변형 및 대안적 구성이 이루어질 수 있으며, 소정의 설명된 실시예는 도면에 도시되고 앞서 상세히 설명되었다. 그러나, 본 발명을 개시된 특정 형태들로 한정하려는 의도가 아니라, 반대로, 모든 변형, 대안적 구성, 및 본 발명의 사상 및 범주 내에 있는 등가물을 포함하고자 함을 이해하여야 한다.

Claims (65)

1. 컴퓨팅 환경에서,

   인터페이스를 통해 함수 호출(function call)을 수신하는 단계 - 상기 함수 호출은 마크업(markup) 언어 데이터를 포함함 - ; 및

   상기 마크업 언어 데이터를 해석하여 장면 그래프(scene graph) 내의 데이터를 수정하는 단계

   를 포함하는 방법.
2. 제1항에 있어서,

   상기 장면 그래프 내의 데이터를 수정하는 단계는, 비주얼 클래스의 새로운 인스턴스(instance)를 초기화시키는 단계를 포함하는 방법.
3. 제2항에 있어서,

   상기 장면 그래프 내의 데이터를 수정하는 단계는, 상기 장면 그래프 내의 비주얼 객체와 변환을 연관시키기 위해 코드를 인보트(invoke)하는 단계를 포함하는 방법.
4. 제1항에 있어서,

   장면 그래프 데이터 구조 내의 데이터를 수정하는 단계는, 드로잉 비주얼 (drawing visual)을 상기 장면 그래프에 배치하는 코드를 인보크하는 단계를 포함하는 방법.
5. 제4항에 있어서,

   드로잉 컨텍스트를 반환하는 단계를 더 포함하고, 상기 드로잉 컨텍스트는 상기 드로잉 비주얼로 렌더링(rendering)하기 위한 메카니즘을 제공하는 방법.
6. 제2항에 있어서,

   상기 장면 그래프 내의 데이터를 수정하는 단계는, 상기 장면 그래프 내의 비주얼 객체와 브러시 데이터(brush data)를 연관시키는 코드를 인보크하는 단계를 포함하는 방법.
7. 제6항에 있어서,

   상기 브러시 데이터는 솔리드 컬러(solid color)에 대응하는 데이터를 수신하는 단계를 포함하는 방법.
8. 제6항에 있어서,

   브러시 데이터를 수신하는 단계는, 선형 계조 브러시(linear gradient brush)에 대응하는 데이터를 수신하는 단계를 포함하고, 스톱 컬렉션(stop collection)은 적어도 하나의 스톱을 포함하는 방법.
9. 제6항에 있어서,

   브러시 데이터를 수신하는 단계는, 원형 계조 브러시(radial gradient brush)에 대응하는 데이터를 수신하는 단계를 포함하는 방법.
10. 제6항에 있어서,

    브러시 데이터를 수신하는 단계는, 이미지에 대응하는 데이터를 수신하는 단계를 포함하는 방법.
11. 제10항에 있어서,

    이미지에 적용할 이미지 효과에 대응하는 마크업을 수신하는 단계를 더 포함하는 방법.
12. 제1항에 있어서,

    형상의 윤곽을 정의하는 펜 데이터에 대응하는 마크업을 수신하는 단계를 더 포함하는 방법.
13. 제1항에 있어서,

    상기 마크업은, 사각형, 복선(polyline), 다각형, 경로, 선 및 타원 형상들을 포함하는 세트중 적어도 하나를 포함하는 형상 클래스에 대응하는 방법.
14. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 상기 장면 그래프 데이터 구조 내의 사각형을 표현하는 지오메트리 관련 함수(geometry-related function)를 인보크하는 단계를 포함하는 방법.
15. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 상기 장면 그래프 데이터 구조 내의 경로를 표현하는 지오메트리 관련 함수를 인보크하는 단계를 포함하는 방법.
16. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 상기 장면 그래프 데이터 구조 내의 선을 표현하는 지오메트리 관련 함수를 인보크하는 단계를 포함하는 방법.
17. 제1항에 있어서,

    상기 마크업은 상기 장면 그래프 데이터 구조 내의 비주얼을 히트-테스팅(hit-testing)하는 것과 관련되는 방법.
18. 제1항에 있어서,

    장면 그래프 데이터 구조 내의 데이터를 수정하는 단계는, 상기 장면 그래프 데이터 구조 내의 비주얼의 좌표를 변환하는 것에 관련된 함수를 인보크하는 단계를 포함하는 방법.
19. 제1항에 있어서,

    상기 마크업은 상기 장면 그래프 데이터 구조 내의 비주얼의 바운딩 박스(bounding box)를 계산하는 것과 관련되는 방법.
20. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 상기 장면 그래프 데이터 구조 내의 비주얼 객체에 대한 공통 인터페이스를 통해 함수를 인보크하는 단계를 포함하는 방법.
21. 제1항에 있어서,

    적어도 하나의 비주얼 객체의 트리를 렌더링 타겟으로 렌더링하기 위한 비주얼 관리자(visual manager)를 인보크하는 단계를 더 포함하는 방법.
22. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 상기 장면 그래프 데이터 구조 내에 컨테이너 객체(container object)를 배치하는 함수를 인보크하는 단계를 포함하고, 상기 컨테이너 객체는 적어도 하나의 비주얼 객체를 포함하도록 구성되는 방법.
23. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 이미지 데이터를 상기 장면 그래프 데이터 구조 내에 배치하는 함수를 인보크하는 단계를 포함하는 방법.
24. 제23항에 있어서

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 이미지 효과 객체를 상기 이미지 데이터와 연관되는 상기 장면 그래프 데이터 구조 내에 배치하는 함수를 인보크하는 단계를 포함하는 방법.
25. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 텍스트에 대응하는 데이터를 상기 장면 그래프 데이터 구조 내에 배치하는 함수를 인보크하는 단계를 포함하는 방법.
26. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 상기 함수 호출에 응답하 여 드로잉 컨텍스트를 제공하는 함수를 인보크하는 단계를 포함하는 방법.
27. 제26항에 있어서,

    상기 함수 호출은 보유 비주얼(retained visual)에 대응하고, 상기 보유 비주얼의 상기 드로잉 컨텍스트를 상기 장면 그래프 데이터 구조로 반환하기 위해 콜백(call back)하는 단계를 더 포함하는 방법.
28. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 3차원 비주얼을 상기 장면 그래프 데이터 구조 내에 배치하는 함수를 인보크하는 단계를 포함하는 방법.
29. 제28항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 2차원 표면을 상기 3차원 비주얼로 매핑하는 단계를 포함하는 방법.
30. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 애니메이션 데이터(animation data)를 상기 장면 그래프 데이터 구조 내에 배치하는 함수를 인보크하는 단계를 포함하는 방법.
31. 제30항에 있어서,

    상기 애니메이션 데이터에 대응하는 타임라인(timeline) 정보를 합성 엔진(composition engine)으로 전달하는 단계를 더 포함하는 방법.
32. 제31항에 있어서,

    상기 합성 엔진은 상기 타임라인에 기초하여 그래픽 데이터를 보간하여 상기 장면 그래프 데이터 구조 내의 객체에 대응하는 출력을 애니메이트하는 방법.
33. 제32항에 있어서,

    상기 합성 엔진은 상기 장면 그래프에 대해 하위 레벨에 있는 방법.
34. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 오디오 및/또는 비디오 데이터에 대응하는 객체를 상기 장면 그래프 데이터 구조 내에 배치하는 함수를 인보크하는 단계를 포함하는 방법.
35. 제1항에 있어서,

    상기 장면 그래프 내의 데이터를 수정하는 단계는, 상기 장면 그래프 데이터 구조 내의 객체의 변경가능한 값을 변경시키는 단계를 포함하는 방법.
36. 컴퓨팅 환경에서,

    마크업 구문 분석기(markup parser);

    상기 마크업 구문 분석기를 마크업의 소스에 연결하는 인터페이스; 및

    객체 모델의 비주얼 정보에 대한 컨테이너(container)

    를 포함하고,

    상기 마크업 구문 분석기는 상기 인터페이스에서 수신된 마크업을 상기 객체 모델 내의 객체들의 메소드 호출(method calls)로 변환하여 비주얼 정보에 대한 상기 컨테이너 내의 데이터를 수정하는 시스템.
37. 제26항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 비주얼 객체들의 트리를 상기 장면 그래프 데이터 구조 내에 배치하는 시스템.
38. 제37항에 있어서,

    상기 마크업이 적어도 하나의 메소드 호출로 변환되어 비주얼 객체들의 트리를 상기 장면 그래프 데이터 구조 내에 배열하는 시스템.
39. 제37항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 비주얼 컬렉션 객체(visual collection object)를 상기 장면 그래프 데이터 구조 내에 배치하는 시스템.
40. 제26항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 비주얼 객체를 상기 장면 그래프 데이터 구조 내에 배치하는 시스템.
41. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 브러시를 상기 비주얼 객체와 연관시키는 시스템.
42. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 지오메트리를 상기 비주얼 객체와 연관시키는 시스템.
43. 제42항에 있어서,

    상기 지오메트리는 타원 지오메트리, 사각형 지오메트리, 선 지오메트리, 및 경로 지오메트리를 포함하는 세트중 적어도 하나를 포함하는 시스템.
44. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 변환을 상기 비주얼 객체와 연관시키는 시스템.
45. 제44항에 있어서,

    상기 변환은 상기 비주얼 객체의 지각 각도(perceived angle)를 변경하기 위한 회전 변환을 포함하는 시스템.
46. 제44항에 있어서,

    상기 변환은 상기 비주얼 객체의 지각 크기를 변경하기 위한 스케일 변환을 포함하는 시스템.
47. 제44항에 있어서,

    상기 변환은 상기 비주얼 객체의 지각 위치를 변경하기 위한 이동(translate) 변환을 포함하는 시스템.
48. 제44항에 있어서,

    상기 변환은 상기 비주얼 객체의 지각 스큐를 변경하기 위한 스큐(skew) 변환을 포함하는 시스템.
49. 제44항에 있어서,

    상기 마크업은 상기 변환과 연관된 애니메이션 정보를 제공하고, 상기 애니메이션 정보는 상기 변환과 연관된 변환 데이터가 시간에 따라 변경되게 하여 상기 비주얼 객체의 상기 변환을 시간에 따라 애니메이트하는 시스템.
50. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 컬러를 상기 비주얼 객체와 연관시키는 시스템.
51. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 계조 데이터를 상기 비주얼 객체와 연관시키는 시스템.
52. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 타일 브러시를 상기 비주얼 객체와 연관시키는 시스템.
53. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 이미지를 상기 비주얼 객체와 연관시키는 시스템.
54. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 드로잉 프리미티브(drawing primitive)들을 포함하는 드로잉을 상기 비주얼 객체와 연관시키는 시스템.
55. 누락.
56. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 오디오 및/또는 비디오 매체를 상기 비주얼 객체와 연관시키는 시스템.
57. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 이미지 효과를 상기 비주얼 객체와 연관시키는 시스템.
58. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 펜을 상기 비주얼 객체와 연관시켜, 형상의 윤곽이 그려지는 방법을 기술하는 시스템.
59. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 상기 비주얼 객체와 연관된 드로잉 컨텍스트(drawing context)를 얻는 시스템.
60. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 히트 테스팅 데이터를 상기 비주얼 객체와 연관시키는 시스템.
61. 제40항에 있어서,

    상기 마크업이 메소드 호출로 변환되어 사각형을 상기 비주얼 객체와 연관시키는 시스템.
62. 제61항에 있어서,

    상기 마크업은, 소스 사각형이 목표 사각형에 맞도록 스트레치되는 방법을 기술하는 데이터를 포함하는 시스템.
63. 누락.
64. 누락.
65. 컴퓨팅 환경에서,

    마크업을 포함하는 함수 호출들을 수신하는 인터페이스 수단;

    상기 마크업을, 그래픽 데이터를 렌더링하는 것과 연관된 객체 모델에 대응하는 데이터로 변환하는 구문 분석 수단; 및

    상기 그래픽 데이터를 출력하는 렌더링 수단

    을 포함하는 시스템.

Images