从titanium更新SVG在android中不起作用
我的任务是在同一页中显示listView和WebView。当用户选择 列表,并将视图切换到svg中的webview。当用户取消选择列表项时,svg中的相同项也将取消选择 此代码在iphone中有效。当我在android上尝试同样的方法时,它不起作用。 我分享我的代码 -------------------------------app.js------------------从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
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>