从titanium更新SVG在android中不起作用

从titanium更新SVG在android中不起作用,android,html,svg,titanium,Android,Html,Svg,Titanium,我的任务是在同一页中显示listView和WebView。当用户选择 列表,并将视图切换到svg中的webview。当用户取消选择列表项时,svg中的相同项也将取消选择 此代码在iphone中有效。当我在android上尝试同样的方法时,它不起作用。 我分享我的代码 -------------------------------app.js------------------ var win=Ti.UI.createWindow({ 背景颜色:“#fff”, //布局:“垂直”, exitOnC

我的任务是在同一页中显示listView和WebView。当用户选择 列表,并将视图切换到svg中的webview。当用户取消选择列表项时,svg中的相同项也将取消选择

此代码在iphone中有效。当我在android上尝试同样的方法时,它不起作用。 我分享我的代码

-------------------------------app.js------------------

var win=Ti.UI.createWindow({
背景颜色:“#fff”,
//布局:“垂直”,
exitOnClose:false,
全屏:假,
莫代尔:是的,
标题:"伦敦",,
barColor:“#E50026”
});
变量位置={
“地点”:[
{
“id”:“1”,
“检查”:“错误”,
“代码”:“#000033”
},
{
“id”:“2”,
“检查”:“错误”,
“代码”:“#000066”
},
{
“id”:“3”,
“检查”:“错误”,
“代码”:“#000099”
},
{
“id”:“4”,
“检查”:“错误”,
“代码”:“#0000bb”
},
{
“id”:“5”,
“检查”:“错误”,
“代码”:“330000”
},
{
“id”:“6”,
“检查”:“错误”,
“代码”:“#660000”
},
{
“id”:“7”,
“检查”:“错误”,
“代码”:“#990000”
},
{
“id”:“8”,
“检查”:“错误”,
“代码”:“bb0000”
},
{
“id”:“9”,
“检查”:“错误”,
“代码”:“003300”
},
{
“id”:“10”,
“检查”:“错误”,
“代码”:“#006600”
},
{
“id”:“11”,
“检查”:“错误”,
“代码”:“#009900”
},
{
“id”:“12”,
“检查”:“错误”,
“代码”:“#00bb00”
}
]};
var svg=Ti.UI.createWebView({
背景颜色:“#ffffff”,
scalesPageToFit:是的,
底部:12%,
宽度:“100%”,
身高:88%,
顶部:'0%',
url:“/drawing.html”
});
var表视图;
var listLondon=Ti.UI.createView({
背景颜色:“#ffffff”,
底部:12%,
宽度:“100%”,
身高:'88%'});
功能英寸(尺寸)
{
//如果不可用,默认为160 dpi
变量高度=尺寸*160.0;
尝试
{ 
//根据屏幕密度计算页眉高度…目标高度为0.25英寸
高度=尺寸*Ti.Platform.displayCaps.dpi;
}
catch(e){warn(“访问屏幕密度计算的显示上限时出错:+e);}
返回高度;
}
var行;
var rowAirportlabel;
var行检查;
var tableData=[];
var表格行高=英寸(0.3);
var firstShowList=true;
对于(变量i=0;ivar win = Ti.UI.createWindow({
    backgroundColor : '#fff',
    //layout : 'vertical',
    exitOnClose : false,
    fullscreen:false ,
    modal:true,
    title : 'LONDON',
    barColor :'#E50026'
});

var Location={
        "Location": [
                        {
                            "id":"1",
                            "check": "false",
                            "code":"#000033"
                        },
                        {
                             "id":"2",
                            "check": "false",
                            "code":"#000066"
                        },
                        {
                             "id":"3",
                            "check": "false",
                            "code":"#000099"
                        },
                        {
                             "id":"4",
                            "check": "false",
                            "code":"#0000bb"
                        },
                        {
                             "id":"5",
                            "check": "false",
                            "code":"#330000"
                        },
                        {
                            "id":"6",
                            "check": "false",
                            "code":"#660000"
                        },
                        {
                            "id":"7",
                            "check": "false",
                            "code":"#990000"
                        },
                        {
                            "id":"8",
                            "check": "false",
                            "code":"#bb0000"
                        },
                        {
                            "id":"9",
                            "check": "false",
                            "code":"#003300"
                        },
                        {
                            "id":"10",
                            "check": "false",
                            "code":"#006600"
                        },
                        {
                            "id":"11",
                            "check": "false",
                            "code":"#009900"
                        },
                        {
                            "id":"12",
                            "check": "false",
                            "code":"#00bb00"
                        }
                    ]};

var svg=Ti.UI.createWebView({
    backgroundColor : '#ffffff',
    scalesPageToFit: true,
    bottom : '12%',
    width : '100%',
    height : '88%',
    top:'0%',
    url:'/drawing.html'
    });

var tableView;  
var listLondon= Ti.UI.createView({
    backgroundColor : '#ffffff',
    bottom : '12%',
    width : '100%',
    height : '88%'});



function inch(size)
{
    // default to 160 dpi if unavailable
    var height = size * 160.0; 

    try
    { 
        // compute header height based on screen density ... target .25" height
        height = size * Ti.Platform.displayCaps.dpi; 
    }
    catch(e) { warn("Error accessing display caps for screen density calculation: " + e); }

    return height;
}

    var row;
    var rowAirportlabel;
    var rowcheck;
    var tableData = [];
    var tableRowheight=inch(0.3);
    var firstShowList=true;



    for ( var i = 0; i < Location.Location.length; i++) {
        row=null;
        row = Ti.UI.createTableViewRow({
            className : 'forumEvent', 
            rowIndex : i,
            rowId:i,
            height :tableRowheight,
            width:Ti.UI.FILL
        });
        rowAirportlabel=null;
        rowAirportlabel= Ti.UI.createLabel({
                color : 'black',
                font : {
                    fontFamily : 'HelveticaLTStd-Light',
                    fontSize : '14dp'
                },
                text:Location.Location[i].code,
                top:'50%',
                left:'10%',
                width:'auto',
                height : 'auto'});
        rowcheck=null;      
        if(Location.Location[i].check === "true"){
            rowcheck = Titanium.UI.createImageView({
                width:'10%',
                height:'80%',
                right:'2%',
                backgroundColor:Location.Location[i].code,
             });
        }
        if(Location.Location[i].check === "false"){
                rowcheck = Titanium.UI.createImageView({
                    width:'10%',
                    height:'80%',
                    right:'2%',
                    backgroundImage:"transparent",
                 });  
        }
         row.add(rowAirportlabel);
         row.add(rowcheck);
         tableData.push(row);
    }

    tableView =Ti.UI.createTableView({
        separatorColor: 'black',
        data : tableData,
        left:'0%',
        right:'0%',
        borderColor:"#000000",
        width:Ti.UI.FILL,
        height:Ti.UI.FILL,
        });

    listLondon.add(tableView);
    win.add(listLondon);
    win.add(svg);   

    tableView.addEventListener('click', function(e) {
        Ti.App.fireEvent('tableViewClickEventListener', {index : e.index});
    });

    Ti.App.addEventListener('tableViewClickEventListener', tableViewClickEventListener);

    function tableViewClickEventListener(e) {
        if (Location.Location[e.index].check==="true") {
            Location.Location[e.index].check="false";
            //Ti.API.info("false ==== "+Location.Location[e.index].check);
        } else if(Location.Location[e.index].check==="false"){
            Location.Location[e.index].check="true";
            //Ti.API.info("true  ==== "+Location.Location[e.index].check);
        }
        row-null;
        row = Ti.UI.createTableViewRow({
            className : 'forumEvent', 
            rowIndex : e.index,
            rowId:e.index,
            height : tableRowheight,
            width:Ti.UI.FILL
        });
        rowAirportlabel=null;   
        rowAirportlabel= Ti.UI.createLabel({
                color : 'black',
                font : {
                    fontFamily : 'HelveticaLTStd-Light',
                    fontSize : '14dp'
                },
                text:Location.Location[e.index].code,
                top:'50%',
                left:'10%',
                width:'auto',
                height : 'auto'});
        rowcheck=null;      
        if(Location.Location[e.index].check === "true"){
            rowcheck = Titanium.UI.createImageView({
                width:'10%',
                height:'80%',
                right:'2%',
                backgroundColor:Location.Location[e.index].code,
             });
        }
        if(Location.Location[e.index].check === "false"){
                rowcheck = Titanium.UI.createImageView({
                    width:'10%',
                    height:'80%',
                    right:'2%',
                    backgroundImage:"transparent",
                 });  
        }
         row.add(rowAirportlabel);
         row.add(rowcheck);
         tableView.updateRow(e.index, row);
    };


var listButton = Ti.UI.createButton({
    width : '20%',
    height : '10%',
    left : '30%',
    bottom : '1%',
    backgroundImage:"/images/icon_list.png"});


var mapButton = Ti.UI.createButton({
    width : '20%',
    height : '10%',
    bottom : '1%',
    right : '30%',
    backgroundImage:"/images/btn_map.png"});

    win.add(listButton);
    win.add(mapButton);

mapButton.addEventListener("click",function(e){
    Ti.App.fireEvent('mapButtonClick',{title:e.title});

});



Ti.App.addEventListener('mapButtonClick',mapButtonClick);
function mapButtonClick(){
    Ti.App.fireEvent('ShowMapSVG',{message:Location});
    svg.show();
    listLondon.hide();
};

listButton.addEventListener("click",function(e){
    Ti.App.fireEvent('listButtonClick',{title:e.title});
});

Ti.App.addEventListener('listButtonClick',listButtonClick);

function listButtonClick(){
    Ti.App.fireEvent('ShowLists',{message:''});
    svg.hide();
    listLondon.show();
};

if (firstShowList==true) {
    svg.hide();
    listLondon.show();
    firstShowList=false;
}

win.open();

--------------------drawing.html---------
<!DOCTYPE html>
    <head>
        <title>SVG Assignment</title>
        <!-- <script src="jquery.js" type="text/javascript"></script> 
        <script type="text/javascript" src="jquery.mobile-1.2.0.min.js"></script> 

        <link rel="Stylesheet" href="jquery.mobile-1.2.0.min.css" /> -->
         <meta name="viewport" content="width=device-width, height = device-height,initial-scale=1.0" />
    <!--<script type="text/javascript" src="drawing.js"></script>-->
    <script>
    var rectColor = '';
var svgObject = '' , svgDoc = '';
var Location={
        "Location": [
                        {
                            "id":"1",
                            "check": "false",
                            "code":"#000033"
                        },
                        {
                             "id":"2",
                            "check": "false",
                            "code":"#000066"
                        },
                        {
                             "id":"3",
                            "check": "false",
                            "code":"#000099"
                        },
                        {
                             "id":"4",

                            "check": "false",
                            "code":"#0000bb"
                        },
                        {
                             "id":"5",

                            "check": "false",
                            "code":"#330000"
                        },
                        {
                             "id":"6",

                            "check": "false",
                            "code":"#660000"
                        },
                        {
                             "id":"7",

                            "check": "false",
                            "code":"#990000"
                        },
                        {
                             "id":"8",

                            "check": "false",
                            "code":"#bb0000"
                        },
                        {
                             "id":"9",

                            "check": "false",
                            "code":"#003300"
                        },
                        {
                             "id":"10",

                            "check": "false",
                            "code":"#006600"
                        },
                        {
                             "id":"11",

                            "check": "false",
                            "code":"#009900"
                        },
                        {
                             "id":"12",

                            "check": "false",
                            "code":"#00bb00"
                        }

                    ]};
function setColor(id)
        {
    if(svgObject == '' || svgDoc == '' ){

        svgObject = document.getElementById("svgObject");
        svgDoc = svgObject.contentDocument;
    }
            var mapPath = svgDoc.getElementById(id);

            for(var i=0;i<Location['Location'].length;i++){



                if(Location['Location'][i].id== id){
                    var currentColor = mapPath.style.fill;

                    if(currentColor == Location['Location'][i].code){

                        mapPath.style.fill = '#ffffff';
                    }else{

                        mapPath.style.fill=Location['Location'][i].code;


                    }

                }

                }
            var color =Location['Location'][i].code
            //alert(JSON.stringify(Location) + ' ' + id + ' ' + color);
        }
function ShowMapSVG(e) {
       Ti.API.info(JSON.stringify(e.message));
        loadSvg(e.message);
    }

    Ti.App.addEventListener("ShowMapSVG", ShowMapSVG);

function loadSvg(data)
        {
        Location = data;
        svgObject = document.getElementById("svgObject");
        svgDoc = svgObject.contentDocument; //get the inner DOM of test.svg
        for(var i=0;i<Location.Location.length;i++){
            var checked = Location['Location'][i].check;
            var rectID = Location['Location'][i].id;
            Ti.API.info(Location.Location.length+" >>>> "+checked + rectID );
            if (checked == 'true'){

                var colorCode = Location['Location'][i].code;
                Ti.API.info("true >>>> "+Location['Location'][i].check);
                var mapPath = svgDoc.getElementById(rectID);
                mapPath.style.fill=colorCode;
            }
            else if(checked == 'false'){
                var mapPath = svgDoc.getElementById(rectID);
                mapPath.style.fill='#ffffff';
                 Ti.API.info("false >>>> "+Location['Location'][i].check);

            }

        }
    }



    </script>
    </head>
    <body>

        <div id="main">

                <object id='svgObject' data="drawing.svg"  type="image/svg+xml"></object> 

        </div>





    </body>
</html>

-------------------------drawing.svg-------------------
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   version="1.1"
   id="map"
   x="0px"
   y="0px"

   xml:space="preserve"
   inkscape:version="0.48.4 r9939"
  width="100%" height="100%"
    viewBox="0 0 1000 800"
   sodipodi:docname="drawing.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="375"
     inkscape:cy="520"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1280"
     inkscape:window-height="968"
     inkscape:window-x="-4"
     inkscape:window-y="-4"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="1"
       onclick="parent.parent.setColor('1');"
       width="113.49831"
       height="156.35548"
       x="78.965118"
       y="17.041595"
       inkscape:label="#rect2985" />
    <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="2"
       onclick="parent.setColor('2');"
       width="113.49831"
       height="156.35548"
       x="323.25085"
       y="19.898726"
       inkscape:label="#rect2985-1" />
    <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="3"
       onclick="parent.setColor('3');"
       width="113.49831"
       height="156.35548"
       x="574.67944"
       y="17.041584"
       inkscape:label="#rect2985-7" />

     <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="4"
       onclick="parent.setColor('4');"
       width="113.49831"
       height="156.35548"
       x="68.965134"
       y="219.89871"
       inkscape:label="#rect2985-48" />

    <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="5"
       onclick="parent.setColor('5');"
       width="113.49831"
       height="156.35548"
       x="320.39371"
       y="228.47014"
       inkscape:label="#rect2985-5" />


    <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="6"
       onclick="parent.setColor('6');"
       width="113.49831"
       height="156.35548"
       x="586.10797"
       y="211.32732"
       inkscape:label="#rect2985-4" />
    <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="7"
       onclick="parent.setColor('7');"
       width="113.49831"
       height="156.35548"
       x="77.536568"
       y="422.75586"
       inkscape:label="#rect2985-0" />

       <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="8"
       onclick="parent.setColor('8');"
       width="113.49831"
       height="156.35548"
       x="328.96515"
       y="422.75589"
       inkscape:label="#rect2985-8" />
     <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="9"
       onclick="parent.setColor('9');"
       width="113.49831"
       height="156.35548"
       x="588.96515"
       y="411.3273"
       inkscape:label="#rect2985-45" />   

    <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="10"
       onclick="parent.setColor('10');"
       width="113.49831"
       height="156.35548"
       x="80.393707"
       y="634.18445"
       inkscape:label="#rect2985-9" />


    <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="11"
       onclick="parent.setColor('11');"
       width="113.49831"
       height="156.35548"
       x="328.96512"
       y="625.61298"
       inkscape:label="#rect2985-2" />


    <rect
       style="fill:#ffffff;fill-opacity:0.70588229;stroke:#000000;stroke-width:0.9302299;stroke-miterlimit:0;stroke-opacity:1;stroke-dasharray:none"
       id="12"
       onclick="parent.setColor('12');"
       width="113.49831"
       height="156.35548"
       x="588.96515"
       y="622.75592"
       inkscape:label="#rect2985-2-1" />
  </g>

</svg>