2011-08-09 6 views
2

UIWebview에로드 한 SVG 파일을 조작하는 방법을 알고 싶습니다. 현재 SVG 파일을 HTML 파일로로드 한 다음 UIWebview에로드하고 있습니다. 나는 당신이 이것을하기 위해 Javascript를 사용할 것이라고 추정하지만 정확히 어떻게 움직이는 지 확신하지 못합니다. 이상적으로는 iPad 앱에서 SVG를 즉시 조작 할 수 있기를 바랍니다. UIWebview에 코드를 삽입 할 수는 있지만 내 시도에는 성공하지 못했다는 것을 알고 있습니다. 진흙으로 맑습니까? 아마 약간의 코드가 도움이 될 것입니다.'진행중인 SVG 조작 UIWebview

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
    <title>SVG</title> 
    </head> 
    <body> 
    <object id="circle" data="Circle.svg" width="250" height="250" type="image/svg+xml"/> 
    </body> 
</html> 
: 여기
- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 

    NSString* path = [[NSBundle mainBundle] pathForResource:@"SVG" ofType:@"html"]; 
    NSString* content = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil]; 

    webView = [UIWebView new]; 
    webView.frame = CGRectMake(0, 0, 1024, 768); 
    webView.dataDetectorTypes = UIDataDetectorTypeAll; 
    webView.userInteractionEnabled = YES; 
    [webView loadHTMLString:content baseURL:[[NSBundle mainBundle] bundleURL]]; 

    [self.view addSubview:webView]; 
    [webView release]; 
} 

가있는 UIWebView에로드 된 HTML 파일 내부 코드 : 여기

내가보기 컨트롤러 내부에있는 UIWebView로하는 .m 파일을 HTML 파일을로드하는 방법입니다 멋진 리터를 생성

<svg xmlns="http://www.w3.org/2000/svg"> 
<circle id="redcircle" cx="200" cy="50" r="50" fill="red" /> 
</svg> 

:

... 그리고 드디어는 SVG 파일 내부 코드 UIWebview에서 ittle 빨간색 동그라미. 이제보기 컨트롤러 .m 파일에서 원을 조작 할 수 있기를 원합니다. 예를 들어 사용자가 iPad 화면을 터치 할 때 채우기 색상 속성을 녹색으로 변경하십시오. 이것은 가능한가?

나는 이것이 모두 의미가 있기를 바랍니다. 그것은 다소 복잡합니다. 하지만 궁극적으로 HTML 프레임 워크에서 SVG로 그래픽을 만들고 UIWebview에 표시합니다.

도움을 주시면 감사하겠습니다. 감사.

답변

3

터치 이벤트에 대한 응답처럼 페이지가 처음로드 된 후 WebView에서 stringByEvaluatingJavaScriptFromString에 임의의 Javascript를 전달하여 임의의 Javascript를 실행할 수 있습니다.

그래서 자바 스크립트는 SVG 개체를 발견하고 색상이 같은 (YMMV, 실제로 테스트 해 보지 않았다) 보이는 변경하는 경우 :

NSString *string = @"var path=document.getElementById('circle').getSVGDocument().getElementById('redcircle');path.style.setProperty('fill', '#00FF00', '');"; 
[webView stringByEvaluatingJavaScriptFromString:string]; 
+0

:

var path=document.getElementById("circle").getSVGDocument().getElementById("redcircle");path.style.setProperty("fill", "#00FF00", ""); 

당신은 그것을 실행할 수 있습니다 귀하의 회신에 감사드립니다. 나는 당신의 제안을 시도했지만 아아 서클은 완고하게 빨간 채로 남아 있습니다. UIWebview를 추가 한 후 코드를 실행하려고 시도했지만 성공하지 못했다. HTML과 SVG를 설정하는 방법과 관련이 있습니까? – Kangoo

+0

아니, 내 잘못이야. :) 당신이 색을 바꿀 수 있도록 빨간 원 객체를 얻는 것은 두 단계 과정입니다 - (1) getElementById ('circle') SVG 객체를 얻고, (2) getElementById ('redcircle')를 써서 원을 얻습니다. 내가 준 예제 코드의 단계 중 하나를 놓쳤습니다. 위의 수정되었습니다. – Euan

+0

메이트, 당신은 살벌한 전설입니다! 도움 주셔서 감사합니다. 매우 감사. – Kangoo