2011-08-09 4 views
2

UIWebviewに読み込んだSVGファイルを操作する方法を知りたいと思います。現在、私はSVGファイルをHTMLファイルにロードし、それをUIWebviewにロードしています。私はあなたがこれを行うためにJavascriptを使用するだろうと推測しますが、それについて正確にどのように行くのかはわかりません。理想的には、iPadアプリでSVGをオンザフライで操作できるようにしたいと考えています。私はあなたがUIWebviewにコードを挿入することができますが、私の試みでは成功していないことを認識しています。泥のようにクリア?おそらく少しのコードが役に立ちます。ここで「オンザフライで」SVGを操作するUIWebview

は、私はビューコントローラ内のUIWebViewに.MファイルをHTMLファイルをロードする方法である:

<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ファイル内のコードです素敵リットルを作成

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

...そしてついには、SVGファイル内のコードですUIWebviewの赤い丸で囲みます。今度は、View Controller .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')私が与えたサンプルコードのステップの1つが欠けていました。今修正されました。 – Euan

+0

メイト、あなたは血の伝説です!あなたに助けてくれてありがとう。とても有難い。 – Kangoo

関連する問題