摆在我面前的问题就是选择什么语言进行编写咯，我首先考虑了JAVA，首先我从来没写过JAVA的程序，而且IDE装起来很麻烦，而且还是英文的，那更加完全不懂了。然后是C#，很多人都不知道C#可以写Android应用。其实是可以的，但是Android Studio我上次用着卡卡的，印象不是很好，不想用。那还剩下什么选择呢？还有一个：HTML5。
好了我去装了个Hbuilder：
中文的，很好用，问题在于我也从来没用过javascript，不过这是小问题啦。
打开Hbuilder，设置一些护眼什么的，然后点左上角[文件]-[新建]-[移动APP]。然后我选了个模板：
嗯，这就是这个程序在手机上执行的时候的样子。然后我模仿着加了一个列表项到index.html里面去：
<li id="plus/controller.html" onclick="clicked(this.id)">
<span class="item">Controller <div class="chs">小车遥控器</div>
</span></li>12345
好的，于是这个列表就加了一个选项了。：
继续，在plus文件夹里边添加一个controller.html，这就是我们的摇杆所存在的页面。在这个页面上，我们需要一个canvas标签和一个js脚本共同来绘制摇杆：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--<meta name="MobileOptimized" content="320" />-->
<title>小车遥控器</title>
<script type="text/javascript" src="../js/common.js"></script>
</head>
<body>
<div class="leftjoystick">
<canvas id="joystick" width="120" height="120"></canvas>
<script src="../js/Joystick.js"></script>
</div>
</body></html>12345678910111213141516171819
好了，开始写代码绘制摇杆之前，我先做了两幅图，这样绘制摇杆时候就比较省力气了，效果也比较好。。
然后经过了一整天来熟悉javascript。我把控制摇杆的js代码捣鼓出来了。放代码咯：
var ji = new Image()//内摇杆图片var jo = new Image()//外摇杆图片var joystick = document.getElementById('joystick')//画板var josize = joystick.height//外摇杆大小var jisize = josize * 0.6//内摇杆大小var centerX = josize / 2//摇杆中心x坐标var centerY = josize / 2//摇杆中心y坐标window.addEventListener('load', load, false)var jc = joystick.getContext('2d')//画布//摇杆头应当移动到的位置var jx = 0,
jy = 0//图片加载完成时执行这俩函数ji.onload = function() {
jc.drawImage(ji, centerX - jisize / 2, centerY - jisize / 2, jisize, jisize)//首次绘制内摇杆}
jo.onload = function() {
jc.drawImage(jo, centerX - josize / 2, centerY - josize / 2, josize, josize)
}//绘图函数（绘制图形的时候就是用户观察到摇杆动了，所以取名是move）function move() {
jc.clearRect(centerX - josize / 2, centerY - josize / 2, josize, josize)//清空画板
jc.drawImage(jo, centerX - josize / 2, centerY - josize / 2, josize, josize)//画底座
jc.drawImage(ji, centerX - jisize / 2 + jx, centerY - jisize / 2 + jy, jisize, jisize)//画摇杆头
requestAnimationFrame(move)//下一次绘图}
ji.src = '../img/joystickin.png'//加载图片jo.src = '../img/joystickout.png'//加载图片//页面加载时执行该函数function load() {
document.addEventListener('touchstart', touch, false)
document.addEventListener('touchmove', touch, false)
document.addEventListener('touchend', touch, false) //加载的时候先把摇杆绘制出来再说
move() //var effectiveFinger = 0//当前有效手指
//触摸事件触发函数
function touch(event) {
var event = event || window.event var oInp = document.getElementById("inp") switch(event.type) { case "touchstart": // //判断是否击中摇杆头
// if(Math.abs(event.touches[event.identifier].clientX - 100 - jx) <= 40 &&
// Math.abs(event.touches[event.identifier].clientY - 100 - jy) <= 40) {
// effectiveFinger = event.identifier//若是,则将此手指设为有效手指
// }//这个不知道为啥不能起作用，获取不到event.identifier。
break case "touchend"://手指离开的时候
//若手指离开,那就把内摇杆放中间
jx = 0
jy = 0 break case "touchmove"://手指移动的时候：
//是否触摸点在摇杆上
if(Math.sqrt(Math.pow(event.touches[effectiveFinger].clientX - centerX, 2) + Math.pow(event.touches[effectiveFinger].clientY - centerY, 2)) <=
josize / 2 - jisize / 2) {
jx = event.touches[effectiveFinger].clientX - centerX
jy = event.touches[effectiveFinger].clientY - centerY
} else
//否则计算摇杆最接近的位置
{ var x = event.touches[effectiveFinger].clientX,
y = event.touches[effectiveFinger].clientY,
r = josize / 2-jisize/2 var ans=GetPoint(centerX,centerY,r,centerX,centerY,x,y) //圆与直线有两个交点，计算出离手指最近的交点
if(Math.sqrt((ans[0]-x)*(ans[0]-x)+(ans[1]-y)*(ans[1]-y))<Math.sqrt((ans[2]-x)*(ans[2]-x)+(ans[3]-y)*(ans[3]-y)))
{
jx=ans[0]-centerXjy=ans[1]-centerY
} else
{
jx=ans[2]-centerXjy=ans[3]-centerY
}
} //move()
event.preventDefault()//防止页面滑动，取消掉默认的事件
break
}
}
requestAnimationFrame(move)//开始绘图}//计算圆于直线的交点（这一块好难啊）function GetPoint(cx, cy, r, stx, sty, edx, edy) {
//(x-cx)^2+(y-cy)^2=r^2
//y=k*x+b
var k = (edy - sty) / (edx - stx) var b = edy - k * edx //(1 + k^2)*x^2 - x*(2*cx -2*k*(b -cy) ) + cx*cx + ( b - cy)*(b - cy) - r*r = 0
var x1, y1, x2, y2 var c = cx * cx + (b - cy) * (b - cy) - r * r var a = (1 + k * k) var b1 = (2 * cx - 2 * k * (b - cy)) var tmp = Math.sqrt(b1 * b1 - 4 * a * c)
x1 = (b1 + tmp) / (2 * a)
y1 = k * x1 + b
x2 = (b1 - tmp) / (2 * a)
y2 = k * x2 + b return [x1,y1,x2,y2]
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116
这个代码的思路就是，如果手指在底座上，那么就把摇杆头移动到手指下方，如果手指在底座外，那就把摇杆移动到底座离手指最近的部分。嗯，就是这样。
一、首先从功能与设计目标来看， H5专网页主要有以下4大类型：
1.活动运营型
为活动推广运营而打造的H5页面是最常见的类型，形式多变，包括游戏、邀请函、贺卡、测试题等形式。与以往简单的静态广告图片传播不同，如今的H5活动运营页需要有更强的互动、更高质量、更具话题性的设计来促成用户分享传播。从进入微信H5页面到最后落地到品牌App内部，如何设计一套合适的引流路线也颇为重要。
2.品牌宣传型
不同于讲究时效性的活动运营页，品牌宣传型H5页面等同于一个品牌的微官网，更倾向于品牌形象塑造，向用户传达品牌的精神态度。在设计上需要运用符合品牌气质的视觉语言，让用户对品牌留下深刻印象。
3.产品介绍型
聚焦于产品功能介绍，运用H5的互动技术优势尽情展示产品特性，吸引用户买买买。
这一类型的H5页面多见于汽车品牌，LEXUS NX是其中的优秀代表案例。精致和极富质感的建模、细腻的光效营造出酷炫的视觉风格。用手指跟随光的轨迹切割画面揭开序幕，通过合理优雅的触碰、摩擦、滑动等互动形式带领用户一同探索产品的7大特性，宏观和微观都照顾周全。
4.总结报告型
自从支付宝的十年账单引发热议后，各大企业的年终总结现也热衷于用H5技术实现，优秀的互动体验令原本乏味的总结报告有趣生动了起来。
二．形式为功能服务
在确定了专题页的功能目标之后，接下来就是关键的设计阶段了。如何有的放矢地进行设计，需要考虑到具体的应用场景和传播对象，从用户角度出发去思考什么样的页面是用户最想看的最会去分享的。
1.简单图文
简单图文是早期最典型的H5专题页形式。“图”的形式千变万化，可以是照片、插画、GIF等。通过翻页等简单的交互操作，起到类似幻灯片的传播效果。考验的是高质量的内容本身和讲故事的能力。
2.礼物/贺卡/邀请函
每个人都喜欢收到礼物的感觉，抓住这一心理，品牌推出了各种H5形式的礼物、贺卡、邀请函，通过提升用户好感度来潜移默化地达到品牌宣传的目的。既然是礼物，那创意和制作便是重要的加分项。
3.问答/评分/测试
问答形式的H5页面也屡见不鲜了，利用用户的求知欲和探索欲，一路选选选，看最后到底是什么成绩。一条清晰的线索是必要的，最后到达的结果页也需要合理不突兀，如果能辅以出彩的视觉和文案，弱化答题的枯燥感那就再好不过了。
4.游戏
从 “围住神经猫”、“看你有多色”等单纯小游戏再到杜蕾斯“一夜N次郎”（即山寨版“别踩白块儿”）等品牌植入式小游戏，H5游戏因为操作简单、竞技性强，一度风靡朋友圈，但创意缺乏和同质化现象导致用户对无脑小游戏逐渐产生了厌倦。品牌要在游戏上做到成功传播，需要在玩法和设计上多下点功夫。
三．为设计加分的4个要点
一个H5页面设计品质的出众与否，会直接影响其传播效果，甚至影响到用户对品牌形象的认知。在这里总结出以下的设计要点：
1.细节与统一
要成就高品质的用户体验，必须考虑到细节与整体的统一性。复古拟物的视觉风格，那字体就不能过于现代；幽默调侃的调调，那文案措辞就不能过于严肃；打情感内容牌的，动效就不能过于花哨。
2.紧跟热点，利用话题效应
想要你的H5专题页一夜爆红，第一时间抓住热点并火速上线，借机进行品牌宣传也不失为一条捷径。
3.讲个好故事，引发情感共鸣
不论H5的形式如何多变，有价值的内容始终是第一位的。在有限的篇幅里，学会讲故事，引发用户的情感共鸣，将对内容的传播形成极大的推动。
4.合理运用技术，打造流畅的互动体验
随着技术的发展，如今的HTML5拥有众多出彩的特性，让我们能轻松实现绘图、擦除、摇一摇、重力感应、擦除、3D视图等互动效果。相较于塞入各种不同种类的动效导致页面混乱臃肿，我们更提倡的是合理运用技术，用心专注于为用户提供流畅的互动体验。
结语
随着手机硬件的升级、HTML5技术的发展以及微信平台的开放，HTML5的跨平台、低成本、快迭代等优势被进一步凸显，这对身处于移动互联网大潮的企业主、品牌、设计师和开发者来说，都将是一个最好的时代。
嵌入到HTML版本1.19为将krpano查看器嵌入到HTML页面embedpano.js需要使用脚本。这个脚本做许多重要的自动检测和设置的东西,如设备/系统功能检测(Flash或HTML5)并自动修复很多浏览器和系统相关问题和局限性(鼠标滚轮的使用)。这使得嵌入krpano查看器容易和简单的——一个脚本包含一行嵌入代码就足够了。文档主题:embedpano的功能。 js脚本
脚本包括
查看器嵌入
嵌入参数
启动/嵌入变量
查看器删除
指出了使用移动设备上(iPhone、iPad、Android)
例子
embedpano的功能。 js脚本
创建并将krpano查看器嵌入到HTML页面。
自动检查闪光或HTML5支持和自动加载适当的krpano查看器。
几个浏览器,跨系统鼠标滚轮修复(wheel-zooming page-scrolling Mac支持,触摸板/ continues-wheel支持,车轮速度标准化)。
当使用固定的几个Flashplayer限制窗口模式=透明或不透明。
自动启用flash播放器的使用全屏模式。
脚本也可以合并一起krpano HTML5浏览器脚本集成到一个脚本文件(例如“tour.js”)。当使用krpano帕诺人或使VTOUR滴这将是默认自动完成。
脚本包括嵌入脚本需要包含在html页面的任何地方。
包括它只是这样:<script src="embedpano.js"></script>
当一个脚本文件将使用HTML5嵌入式查看器,就包括这个文件:<script src="tour.js"></script>查看器嵌入创建html页面上的任何地方<div >观众应该嵌入元素,给它一个独特的id通过css样式名称和定义它的大小:<div id="pano" style="width:100%height:100%"></div>
在定义了<div >元素,创建一个<脚本>元素嵌入脚本代码。的embedpano.js脚本提供了一个embedpano()查看器嵌入函数:
embedpano({...embedding parameters...})
embedpano()函数需要的对象嵌入参数。
完整的例子:<script src="embedpano.js"></script><div id="pano" style="width:600pxheight:400px"></div><script>embedpano({swf:"krpano.swf", xml:"pano.xml", target:"pano"})</script>
嵌入参数embedpano()函数只需要一个Javascript对象作为参数。这个对象是用来传递所有参数(随机)通过使用parametername:价值对。(除了几乎所有的参数目标参数)是可选的,当他们没有定义,将使用默认值。的参数对象提供了以下设置:
swf:"krpano.swf"
名称和路径查看器”。 swf文件(相对于html文件)。
默认值是“krpano.swf”。
js:"krpano.js"
名称和路径krpano HTML5浏览器”。 js文件(相对于html文件)。
默认情况下相同的路径和文件名设置的基础主权财富基金设置将被使用,只是与“。 js的扩展,而不是. swf。
这个设置将被忽略当HTML5浏览器嵌入到嵌入脚本文件。
xml:"krpano.xml"
启动xml文件名称和路径(相对于html文件)。
默认名称相同的基本文件名的swf文件将使用(例如krpano。 xml krpano.swf)。
target:"...pano-div-id..."
浏览器的html元素的id应该嵌入。
将会有一个“警报() 当没有目标的错误。
id:"krpanoSWFObject"
内部观察者对象的id。
这将是观众通过连接的对象javascript接口。
默认id“krpanoSWFObject”。
重要的是,每个观众都有一个惟一的id !
当已经存在一个对象具有给定id,然后嵌入脚本将自动添加数字id,直到年底是独一无二的。
bgcolor:"#000000"
观众的背景颜色(颜色在html格式)。
默认值是“000000 #”(=黑)。
wmode:"..."
设置flash播放器窗口模式 设置。
可能的设置:
窗口——flash播放器默认情况下,系统支持和性能之间的妥协。注意:在许多系统和浏览器,html元素不能重叠的flash播放器模式!看到这窗口模式链接的细节。
不透明的——允许其他html元素重叠Flashplayer(慢的渲染性能)。
透明的——使flash播放器背景透明,允许看到html元素flash播放器后面,此外还允许其他html元素重叠flash播放器(更慢的渲染性能)。
直接——最佳性能,硬件加速表示,没有html重叠在许多系统和浏览器(这通常是最快的方式,但在不兼容或旧系统/浏览器这可能会导致经济放缓)。
krpano将使用窗口模式=直接默认情况下,除了铬-窗口模式=窗口将使用默认(窗口大小调整期间更好的性能和黑色)。
HTML5指出:窗口模式通常是一个Flash-only设置,但窗口模式=透明也将评估krpano HTML5的观众,使背景透明的。 在HTML5浏览器重叠本身总是可能的。
html5:"auto"
设置krpano HTML5浏览器使用。
可能的设置:
汽车——默认设置自动使用HTML5 krpano查看器。
设置,krpano Flash查看器将使用默认桌面和krpano HTML5观众只有当Flashplayer不可用或者当手机/平板电脑将被使用。
更喜欢——喜欢krpano HTML5查看器的使用。
设置,krpano HTML5查看器将使用默认情况下,和krpano Flash查看器只有当系统/浏览器不是方能尽享。
回退——喜欢krpano Flash查看器的使用。使用krpano HTML5浏览器后退闪时不可用。
只有——只使用HTML5 krpano查看器——从不使用krpano Flash查看器。
设置,krpano HTML5查看器将在可能的情况下使用。当系统/浏览器不是方能尽享,那么将显示一条错误消息。
总是总是使用HTML5 krpano查看器,无论系统/浏览器是否支持它。警告——这个设置应该只用于内部测试!
从来没有——从不使用HTML5 krpano查看器,强制使用krpano Flash观众。
设置为HTML5浏览器扩展:(测试)
的html5设置可以扩展“webgl”或“css3d”来定义哪些绘制技术时应优先都可用。
使用例子:html5 =“汽车+ css3d”,html5 = "喜欢+ webgl”,……
当可用默认WebGL将首选。
flash:""
设置krpano Flash浏览器使用。
这是一个基本一样html5设置,逆。它可以用于更好的url,例如通过使用flash =喜欢而不是html5 =后退。
当闪光设置将被设置,它将映射到一个html5设置和覆盖它。
可能的设置:
没有设置,使用html5设置。
汽车- - - - - -一样html5 =汽车。
更喜欢——喜欢krpano Flash查看器的使用。
使用HTML5 krpano观众只有当没有flash播放器和系统/浏览器方能尽享。
这个设置将映射到html5 =后退。
回退——喜欢krpano HTML5查看器的使用。使用krpano Flash观众只是后备当HTML5是不可用的。
这个设置将映射到html5 =喜欢。
只有——只使用krpano Flash查看器——从不使用krpano HTML5查看器。
设置,krpano Flash查看器将在可能的情况下使用。当没有flash播放器,那么将显示一条错误消息。
这个设置将映射到html5 =没有。
从来没有——从不使用krpano Flash浏览器,只使用krpano Flash查看器。
这个设置将映射到html5 =只。
vars:{...}
通过与krpano Javascript对象变量:值对。
这可用于设置krpano启动变量并设置任何其他krpano变量或设置。
将被设置的变量后xml文件加载和解析。
所以这些变量可以用来添加新设置或覆盖设置已经在xml中定义的。
例子:var settings = {}settings["onstart"] = "trace('on start...')"settings["view.hlookat"] = 30embedpano({xml:"pano.xml", target:"pano", vars:settings})
initvars:{...}
通过与krpano Javascript对象变量:值对。
这基本上是一样的增值设置,但是这些变量将被设置之前xml文件将被加载和解析。
的主要使用此设置将变量可以设置自定义路径作为占位符里面url路径在xml文件中和/或设置变量,可以使用xml-if-checks为<包括>元素。
例子:embedpano({..., initvars:{mypath:"./panos1/"} })XML:url="%$mypath%image.jpg"
能够通过initvars变量通过http查询直接在html文件的url语法需要使用:tour.html?initvars.variable=value
basepath:...
设置一个自定义的基本路径解决路径相对于krpano swf文件。
可用于Flash和HTML5调整相对路径的xml。
consolelog:false
一个布尔设置定义如果krpano日志/跟踪消息应该发送到浏览器的Javascript控制台。
mwheel:true
一个布尔设置来控制鼠标滚轮的使用。
当设置为真正的(默认),那么可以使用鼠标滚轮事件将被捕获并查看器(例如缩放)。
当设置为假,那么任何鼠标滚轮的使用将被忽略,浏览器将其默认鼠标滚轮处理(通常是滚动网页)。
mobilescale:0.5
默认情况下所有krpano内容0.5将扩大在移动设备上。
禁用扩展,设置mobilescale设置为1.0。
这可以用于实现响应设计。
参见xmlstagescale设置。
fakedevice:""
假的krpano设备检测设置。
可以设置:“移动”,“平板电脑”,“桌面”。
注意:这个设置应该仅用于内部测试,从未发布!
onready:...Javascript-Function...
的onready设置可用于设置call-back-function完成通知当嵌入和krpano查看器准备使用。
给定的函数将被调用krpano javascript接口对象。
例子:embedpano({target:"krpanoDIV", onready:krpanoReady})function krpanoReady(krpano){ krpano.call("trace(krpano is ready...)")}
Flashplayer指出:这个函数需要的外部接口flash播放器!这意味着回调将本地离线工作/只有当flash播放器的安全设置进行调整。在这里看到更多detatils -本地/离线使用。
onerror:...Javascript-Function...
的onerror设置可用于设置一个自定义embedding-error-handling功能。
给定的函数将调用一个错误消息字符串作为参数。
passQueryParameters:false
一个布尔值设置。 当设置为真正的从html url,所有查询参数作为变量传递给观众。
当启用时,它也可以通过html5,闪光,窗口模式,mobilescale,fakedevice和initvars设置直接在html的url。
使用的例子:tour.html?html5=only&startscene=scene2&initvars.design=flat
启动/嵌入变量有一些特殊的变量,它可以使用嵌入观众。 这些变量并不会直接传递给观众,他们有一个嵌入本身特殊的意义:
xml
与xml变量可以指定路径/名称启动的xml文件。
当没有xml变量将将使用“默认加载”,试图加载一个xml文件具有相同的“:”swf文件(例如krpano.swf⇒krpano。 xml或pano.swf⇒pano.xml或tour.swf⇒之旅。 xml等等……)。
simulatedevice
这个变量允许测试iPhone / iPad /安卓桌面布局和图片。可能的设置:
iphone-模拟iPhone / iPod
ipad——模拟iPad
useragent——模拟设备根据用户代理
androidmobile模拟一个Android的移动设备(Flash)
安卓或androidtablet模拟一个Android平板电脑(Flash)
的krpano iPhone / iPad模拟器(包括在查看器中下载包)一起使用,设置一个iPhone / iPad的背景和一个原始大小的观察窗。
查看器删除为消除帕诺人观众从html页面removepano()函数需要使用!removepano()函数将删除所有内部附加mouse-fixes(Flash)和所有DOM元素和事件(HTML5)。
removepano(id)
removepano()函数需要调用与独特id查看器的对象。
例子:embedpano({target:"panoDIV", id:"pano1"})...removepano("pano1")
指出在移动设备上使用(iPhone、iPad、Android…)有一些设置可用的html文件,应该得到尊重,当试图让所有设备优化结果:
总是使用HMTL5 doctype html文件:<!DOCTYPE html>
正确的1:1 pixel-mapped显示,任何类型的自动页面/视窗扩展应该禁用。这可以通过使用<元>视窗设置html <头>元素:<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />注:“target-densitydpi = device-dpi”设置是只知道Android和可能导致一个警告在其他浏览器(iOS,Chrome,…)在Javascript控制台——在这种情况下可以忽略这个警告。
不要使用<iframe >元素包括观众——总是包括观众直接在页面上。当使用iframes iframe内的页面/窗口缩放不能控制和元素可以出现在一个错误的大小。扩展可以发生在这种情况下,还会影响显示质量。
例子1。 最简单的用法:<script>embedpano({target:"pano"})</script>这里将使用所有缺省值:“krpano。 主权财富基金”的名字flash文件查看器,“krpano。 xml”作为默认的xml文件,“krpanoSWFObject“观众id和100%的大小。只有帕诺人的目标应该是嵌入式必须设置。2。 简单使用但更多的设置:<script>embedpano({swf:"pano.swf", xml:"pano.xml", target:"pano"})</script>这里的路径将swf和xml文件。3。 喜欢HTML5查看器:<script>embedpano({swf:"pano.swf", xml:"pano.xml", target:"pano", html5:"prefer"})</script>4。 设置不透明的窗口模式设置:<script>embedpano({swf:"pano.swf", xml:"pano.xml", target:"pano", wmode:"opaque"})</script>5。 选择性使用HTML5——喜欢只在Android和HTML5 IE10触摸设备上:<script>function selecthtml5usage() { // check for Android: if( navigator.userAgent.indexOf("Android") >= 0 ) return "prefer" // check for IE10 with multi-touch display: if( (navigator.msMaxTouchPoints|0) >1 ) return "prefer" // for all other cases use html5=auto: return "auto"} embedpano({xml:"pano.xml", target:"pano", html5:selecthtml5usage()})</script>
