Commit a37f2655 authored by liujiangnan's avatar liujiangnan

初始化脚手架

parent f0e8275d
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5-template-generator</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head>
<body>
</body>
</html>
\ No newline at end of file
.edit-form{
padding: 30px;
/* display: none; */
}
.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: 20px;
right: 20px;
font-size: 25px;
}
.play{
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
display: none;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5-template-generator</title>
<script src="http://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" >
<link href="./index.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head>
<body>
<!-- 编辑区域 -->
<div class="edit-form container-fluid">
<div class="alert alert-danger" role="alert"></div>
<div class="row">
<div class="img-area col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input class="check-item" type="checkbox" value="1" />
<img src="../lib/images/jiangzhuang_Img1@3x.png" class="img-thumbnail ">
</div>
<div class="img-area col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input class="check-item" type="checkbox" value="2" />
<img src="../lib/images/jiangzhuang_Img2@3x.png" class="img-thumbnail ">
</div>
<div class="img-area col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input class="check-item" type="checkbox" value="3" />
<img src="../lib/images/jiangzhuang_Img3@3x.png" class="img-thumbnail ">
</div>
<div class="img-area col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input class="check-item" type="checkbox" value="4" />
<img src="../lib/images/jiangzhuang_Img4@3x.png" class="img-thumbnail ">
</div>
<div class="img-area col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input class="check-item" type="checkbox" value="5" />
<img src="../lib/images/jiangzhuang_Img5@3x.png" class="img-thumbnail ">
</div>
<div class="img-area col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input class="check-item" type="checkbox" value="6" />
<img src="../lib/images/jiangzhuang_Img6@3x.png" class="img-thumbnail ">
</div>
</div>
<form class="info-area">
<div class="form-group">
<input type="text" class="form-control" id="praise" placeholder="请填写表扬文本">
</div>
<div class="form-group">
<input type="date" class="form-control" id="date" placeholder="日期">
</div>
<div class="form-group">
<input type="text" class="form-control" id="sign" placeholder="老师签名">
</div>
<button type="button" class="btn btn-success preview">预览</button>
</form>
</div>
<!-- 展示区域 -->
<span class="glyphicon glyphicon-remove text-success close-view"></span>
<canvas id="play"></canvas>
</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);
ctx=play[0].getContext("2d");
ctx.clearRect(0, 0, img.width, img.height);
ctx.drawImage(img,0,0);
renderText(imgIndex);
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.fillText(praise,230,165);
ctx.fillText(date,150,255);
ctx.fillText(sign,335,255);
} 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);
}
}
$(function(){
_w = $(window).width();
_h = $(window).height();
// $("#play").attr("width",_w);
// $("#play").attr("height",_h);
$(".img-area").bind('click',function(){
$(".check-item").attr("checked",false).hide();
$(this).find(".check-item").attr("checked",true).show();
$(".alert").html("").hide();
});
$(".close-view").bind('click',function(){
$(this).hide();
$("#play").hide();
$(".edit-form").show();
});
$(".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(){
play.css({height: _w});
var play_w = play.width();
var right = Math.floor(play_w/2)-7;
var top = _w-Math.floor(play_w/2)-7;
var margin_top = Math.floor((_h-play_w)/2);
play.css({
"position": "absolute",
"transform":"rotate(90deg)",
"right": (right-_w)+"px",
"top": (top+margin_top)+"px"
});
});
$("#play").show();
$(".close-view").show();
});
});
\ 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
{
"name": "h5-template-generator",
"version": "1.0.0",
"description": "原生H5课件的脚手架,生成的项目只有jquery+ Bootstrap 框架,如需其他框架则另行引入即可",
"main": "index.js",
"directories": {
"lib": "lib"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "http://vcs.ireadabc.com/template/h5-template-generator.git"
},
"keywords": [
"脚手架"
],
"author": "",
"license": "ISC"
}
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