Commit 0af5564c authored by liujiangnan's avatar liujiangnan

普通模板脚手架发布

parent edd98dbe
......@@ -58,4 +58,6 @@ var server = http.createServer(function (request, response) {
});
});
server.listen(PORT);
console.log("Server runing at port: " + PORT + ".");
\ No newline at end of file
console.log("Server runing at port: " + PORT + ".");
console.log("visit form : http://localhost:"+PORT+"/form/index.html");
console.log("visit index : http://localhost:"+PORT+"/index/index.html");
\ No newline at end of file
.edit-data{
padding: 10px;
}
\ No newline at end of file
......@@ -6,9 +6,15 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5-template-generator</title>
<script type="text/javascript" src="../lib/js/jquery-1.12.3.min.js"></script>
<link href="./index.css" rel="stylesheet" >
<script type="text/javascript" src="http://teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head>
<body>
<body>
<div class="edit-data">
<!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 -->
test: <input type="text" name="test" />
<input id="save" type="button" value="保存" >
</div>
</body>
<script src="./index.js"></script>
</html>
\ No newline at end of file
/*
window.courseware.getData(callback,key); //用于获取数据
window.courseware.setData(data,callback,key); //用于存储数据
var uploadUrl = window.courseware.uploadUrl(); //上传文件的路径
var uploadData = window.courseware.uploadData(); //上传文件必须要的参数
*/
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "h5_test";
$(function(){
window.courseware.getData(function(data){
//数据加载完,才算页面加载完成
//获取数据
if(data&&data.test){
$("[name='test']").val(data.test);
}
//绑定点击事件
$('#save').on('click',function(){
var test = $("[name='test']").val();
//保存新增或修改的数据
window.courseware.setData({test: test},function(){
//保存数据也是异步的
alert("保存成功!");
},key);
})
},key);
})
\ No newline at end of file
.edit-form{
padding: 30px;
/* display: none; */
body {
background: #fff;
}
.img-area{
position: relative;
margin-bottom: 15px;
}
.check-item{
position: absolute;
top: 5px;
left: 25px;
display: none;
}
.info-area{
margin-top: 5px;
}
.alert{
display: none;
}
.preview{
width: 80px;
}
.close-view{
display: none;
position: absolute;
top: 5px;
right: 5px;
font-size: 25px;
}
#playView{
display: none;
#test{
margin: 80px;
}
\ No newline at end of file
......@@ -10,7 +10,7 @@
<script type="text/javascript" src="http://teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head>
<body>
<h1 id="test"></h1>
</body>
<script src="./index.js"></script>
</html>
\ No newline at end of file
/*
var ctx, sprite, img, _w, _h, play;
function initPreviewPage(imgIndex, callback){
img = new Image();
img.onload = function(){
// play=$("#play");
// play.attr("width",img.width);
// play.attr("height",img.height);
play = document.createElement('canvas');
$(play).attr("width",img.width);
$(play).attr("height",img.height);
ctx=play.getContext("2d");
ctx.clearRect(0, 0, img.width, img.height);
ctx.drawImage(img,0,0);
window.courseware.getData(callback,key); //用于获取数据
renderText(imgIndex);
window.air.hideAirClassLoading(key,data); //页面加载完成时,必须调用此方法,用于隐藏遮罩层
*/
callback&&callback();
}
img.src = "../lib/images/jiangzhuang_Img"+imgIndex+"@3x.png";
}
function renderText(imgIndex){
var praise = $("#praise").val();
var date = $("#date").val();
var sign = $("#sign").val();
ctx.font="18px Arial";
ctx.textAlign='center';
if(imgIndex==1){
ctx.fillText(praise,230,170);
ctx.fillText(date,325,240);
ctx.fillText(sign,150,240);
} else if (imgIndex==2){
ctx.font="30px Arial";
ctx.fillText("You are very good!",410,330);
ctx.fillText("2019-12-24",275,495);
ctx.fillText("Tom",605,495);
} else if (imgIndex==3){
ctx.fillText(praise,230,155);
ctx.fillText(date,255,205);
ctx.fillText(sign,255,255);
} else if (imgIndex==4){
ctx.fillText(praise,250,120);
ctx.fillText(date,210,240);
ctx.fillText(sign,335,240);
} else if (imgIndex==5){
ctx.fillText(praise,250,165);
ctx.fillText(date,250,250);
} else if (imgIndex==6){
ctx.fillText(praise,270,185);
ctx.fillText(date,305,267);
ctx.fillText(sign,305,225);
}
}
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "h5_test";
$(function(){
$(function(){
_w = $(window).width();
_h = $(window).height();
window.courseware.getData(function(data){
//数据加载完,才算页面加载完成
//获取数据
if(data&&data.test){
$("#test").html("Hello "+data.test);
} else{
//一般来讲,如果没有获取到数据的话,给一组默认数据,用于演示模板的展示效果,方便别人了解这个模板
$("#test").html("Hello 我是演示信息!");
}
$(".img-area").bind('click',function(){
$(".check-item").attr("checked",false).hide();
$(this).find(".check-item").attr("checked",true).show();
$(".alert").html("").hide();
});
//数据渲染完成后,添加各种交互或者动画效果
//我这里简单做一个渐入渐出效果的例子
var flag = true;
setInterval(function(){
if(flag){
$("#test").fadeIn(500);
}else{
$("#test").fadeOut(500);
}
flag = !flag;
},1000)
$(".close-view").bind('click',function(){
$(this).hide();
$("#playView").hide();
$(".edit-form").show();
});
//在页面加载、事件、动画等都初始化完成后,一定要记得调用此方法,否则模板将是不可用的
window.air.hideAirClassLoading(key,data);
$(".preview").bind('click', function(){
let cardIndex = $('input:checkbox[class="check-item"]:checked').eq(0).val();
if(cardIndex==undefined){
$(".alert").html("请选择奖状!").show(300);
return;
}
$(".edit-form").hide();
initPreviewPage(cardIndex,function(){
let imgUrl = play.toDataURL('image/jpeg', 1.0);
$('#playView').attr('src', imgUrl);
$('#playView').css({height: _w});
$('#playView')[0].onload = function(){
var play_w = $('#playView').width();
var right = Math.floor(play_w/2)+35;
var top = _w-Math.floor(play_w/2)-35;
var margin_top = Math.floor((_h-play_w)/2);
$('#playView').css({
"position": "absolute",
"transform":"rotate(90deg)",
"right": (right-_w)+"px",
"top": (top+margin_top)+"px"
}).show();
};
});
$(".close-view").show();
});
},key);
});
\ No newline at end of file
})
\ No newline at end of file
class MySprite {
x = 0;
y = 0;
radius = 0;
margin = 0;
ctx;
_width = 0;
_height = 0;
_anchorX = 0;
_anchorY = 0;
_offX = 0;
_offY = 0;
scaleX = 1;
scaleY = 1;
_alpha = 1;
rotation = 0;
visible = true;
skewX = 0;
skewY = 0;
_shadowFlag = false;
_shadowColor;
_shadowOffsetX = 0;
_shadowOffsetY = 0;
_shadowBlur = 5;
_radius = 0;
children = [this];
childDepandVisible = true;
childDepandAlpha = false;
img;
_z = 0;
constructor(ctx = null) {
if (!ctx) {
this.ctx = window['curCtx'];
} else {
this.ctx = ctx;
}
}
init(imgObj = null, anchorX = 0.5, anchorY = 0.5) {
if (imgObj) {
this.img = imgObj;
this.width = this.img.width;
this.height = this.img.height;
}
this.anchorX = anchorX;
this.anchorY = anchorY;
}
setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
this._shadowFlag = true;
this._shadowColor = color;
this._shadowOffsetX = offX;
this._shadowOffsetY = offY;
this._shadowBlur = blur;
}
setRadius(r) {
this._radius = r;
}
update($event = null) {
if (!this.visible && this.childDepandVisible) {
return;
}
this.draw();
}
draw() {
this.ctx.save();
this.drawInit();
this.updateChildren();
this.ctx.restore();
}
drawInit() {
this.ctx.translate(this.x, this.y);
this.ctx.rotate(this.rotation * Math.PI / 180);
this.ctx.scale(this.scaleX, this.scaleY);
this.ctx.globalAlpha = this.alpha;
this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
if (this._radius) {
const r = this._radius;
const w = this.width;
const h = this.height;
this.ctx.lineTo(-w / 2, h / 2); // 创建水平线
this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
this.ctx.clip();
}
}
drawSelf() {
if (this._shadowFlag) {
this.ctx.shadowOffsetX = this._shadowOffsetX;
this.ctx.shadowOffsetY = this._shadowOffsetY;
this.ctx.shadowBlur = this._shadowBlur;
this.ctx.shadowColor = this._shadowColor;
} else {
this.ctx.shadowOffsetX = 0;
this.ctx.shadowOffsetY = 0;
this.ctx.shadowBlur = null;
this.ctx.shadowColor = null;
}
if (this.img) {
this.ctx.drawImage(this.img, this._offX, this._offY);
}
}
updateChildren() {
if (this.children.length <= 0) { return; }
for (let i = 0; i < this.children.length; i++) {
if (this.children[i] === this) {
if (this.visible) {
this.drawSelf();
}
} else {
this.children[i].update();
}
}
}
load(url, anchorX = 0.5, anchorY = 0.5) {
return new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = url;
}).then(img => {
this.init(img, anchorX, anchorY);
return img;
});
}
addChild(child, z = 1) {
if (this.children.indexOf(child) === -1) {
this.children.push(child);
child._z = z;
child.parent = this;
}
this.children.sort((a, b) => {
return a._z - b._z;
});
if (this.childDepandAlpha) {
child.alpha = this.alpha;
}
}
removeChild(child) {
const index = this.children.indexOf(child);
if (index !== -1) {
this.children.splice(index, 1);
}
}
removeChildren() {
for (let i = 0; i < this.children.length; i++) {
if (this.children[i]) {
if (this.children[i] != this) {
this.children.splice(i, 1);
i --;
}
}
}
}
_changeChildAlpha(alpha) {
for (let i = 0; i < this.children.length; i++) {
if (this.children[i] != this) {
this.children[i].alpha = alpha;
}
}
}
set alpha(v) {
this._alpha = v;
if (this.childDepandAlpha) {
this._changeChildAlpha(v);
}
}
get alpha() {
return this._alpha;
}
set width(v) {
this._width = v;
this.refreshAnchorOff();
}
get width() {
return this._width;
}
set height(v) {
this._height = v;
this.refreshAnchorOff();
}
get height() {
return this._height;
}
set anchorX(value) {
this._anchorX = value;
this.refreshAnchorOff();
}
get anchorX() {
return this._anchorX;
}
set anchorY(value) {
this._anchorY = value;
this.refreshAnchorOff();
}
get anchorY() {
return this._anchorY;
}
refreshAnchorOff() {
this._offX = -this._width * this.anchorX;
this._offY = -this._height * this.anchorY;
}
setScaleXY(value) {
this.scaleX = this.scaleY = value;
}
getBoundingBox() {
const getParentData = (item) => {
let px = item.x;
let py = item.y;
let sx = item.scaleX;
let sy = item.scaleY;
const parent = item.parent;
if (parent) {
const obj = getParentData(parent);
const _x = obj.px;
const _y = obj.py;
const _sx = obj.sx;
const _sy = obj.sy;
px = _x + item.x * _sx;
py = _y + item.y * _sy;
sx *= _sx;
sy *= _sy;
}
return {px, py, sx, sy};
};
const data = getParentData(this);
const x = data.px + this._offX * Math.abs(data.sx);
const y = data.py + this._offY * Math.abs(data.sy);
const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy);
// const x = this.x + this._offX * Math.abs(this.scaleX);
// const y = this.y + this._offY * Math.abs(this.scaleY);
// const width = this.width * Math.abs(this.scaleX);
// const height = this.height * Math.abs(this.scaleY);
return {x, y, width, height};
}
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment