ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
291 lines (242 loc) • 7.37 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
<title>多图层示例</title>
<link href="https://cdn.bootcss.com/pure/1.0.0/pure.css" rel="stylesheet">
<link rel="stylesheet" href="../style.css">
<style>
#stage{
float:left;
}
canvas{
background-color: #ccc;
}
.right-section{
float:left;
}
#layer canvas{
width:80px;
margin-top: 5px;
}
.layer-box table input{
width:30px;
}
.layer-box table{
text-align: center;
}
</style>
</head>
<body>
<div class="return-btn">
<a href="../">
返回首页
</a>
</div>
<div class="tip">
<h3>示例说明：</h3>
<div>
1、这个示例展示系统的多图层功能。<br>
2、PC端可以在绘图区拖动鼠标绘制，移动端可以拖拽绘制。<br>
3、每次绘制结束，都会在图层信息内更新每个图层的信息。<br>
4、更改图层信息的坐标值、显隐等数据，这些变化也会反应到绘图区。<br>
</div>
<br><br>
</div>
<div id="stage">
<div>绘图区（拖动鼠标绘制） <button onclick="newLayer()">新建图层</button></div>
<br>
<div id="canvas"></div>
<br>
<span>注：图层原本为透明色，灰色仅仅是为了显示效果</span>
</div>
<div class="right-section">
<h4>图层信息 </h4>
<span style="color: red; display: none;font-size: 12px;" id="tip">没有图层，不能绘制，请点击新建图层</span>
<div id="layer">
</div>
</div>
<!-- 新增图层的模板 -->
<div id="layer-box-tpl" style="display: none;">
<div class="layer-box" id="__tplID__"
style="margin-top: 10px;border-bottom:1px solid #000;padding:10px 0;width:300px;">
<!--<canvas width="300" height="150"></canvas>-->
<!--<div class="props">
<div class="title" style="font-weight: bold;">图层属性</div>
<form class="pure-form pure-g">
<div class="pure-control-group pure-u-1-2 pure-g">
<label>id</label>
<input class="pure-input-1-2" disabled value="__id__">
</div>
<div class="pure-control-group pure-u-1-2 pure-g">
<label>name</label>
<input class="pure-input-1-2" disabled value="__name__">
</div>
<div class="pure-control-group pure-u-1-2 pure-g">
<label>x</label>
<input type="number" class="pure-input-1-2" value=__x__ onchange="propsOnChange(__id__,'x',parseInt(this.value))">
</div>
<div class="pure-control-group pure-u-1-2 pure-g">
<label>y</label>
<input type="number" class="pure-input-1-2" value=__y__ onchange="propsOnChange(__id__,'y',parseInt(this.value))">
</div>
</form>
</div>
<div>
<button class="pure-button" onclick="deleteLayer('__id__')">删除图层</button>
<button class="pure-button" onclick="showLayer('__id__')">图层显隐</button>
</div>-->
<table border="1" width="100%">
<tr>
<td>缩略图</td>
<td>id</td>
<!--<td>name</td>-->
<td >x</td>
<td>y</td>
<td>操作</td>
</tr>
<tr>
<td><canvas width="300" height="150"></canvas></td>
<td>__id__</td>
<!--<td>__name__</td>-->
<td>
<input type="number" value=__x__ onchange="propsOnChange(__id__,'x',parseInt(this.value))">
</td>
<td>
<input type="number" value=__y__ onchange="propsOnChange(__id__,'y',parseInt(this.value))">
</td>
<td>
<a href="javascript:void(0);" class="" onclick="deleteLayer('__id__')">删除</a>
<a href="javascript:void(0);" class="" onclick="showLayer('__id__')">显隐</a>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
<script src="../common.js"></script>
<script src="http://localhost:9000/livereload.js"></script>
<script src="../../build/ycc.js"></script>
<script>
var ycc = new Ycc();
var stage = ycc.createCanvas({width:300,height:150,dpiAdaptation:true});
document.getElementById("canvas").appendChild(stage);
ycc.bindCanvas(stage);
var layerDom = document.getElementById("layer");
document.getElementById('tip').style.display = "block";
// newLayer();
/**
* 属性更改监听
* */
function propsOnChange(layerId,prop,val){
console.log('on change...',layerId,prop,val);
var layer = ycc.findLayerById(layerId);
layer[prop] = val;
ycc.layerManager.reRenderAllLayerToStage();
}
/**
*
* */
function newLayer() {
document.getElementById('tip').style.display = "none";
var layer = ycc.layerManager.newLayer({enableEventManager:true,name:'child'});
ycc.layerManager.enableEventManagerOnly(layer);
ycc.layerManager.reRenderAllLayerToStage();
pen();
renderLayerToHtml();
/**
* 钢笔
*/
function pen() {
var startDot = [];
var hasMoved = false;
var ui = null;
layer.onclick = function (e) {};
layer.ondragstart = function (e) {
console.log(e.x,e.y);
startDot = layer.transformToLocal(new Ycc.Math.Dot(e.x,e.y));
ui = new Ycc.UI.BrokenLine({color:"red",width:3,onclick:function (e) {
console.log(e);
}});
layer.addUI(ui);
ui.pointList.push(startDot);
};
layer.ondragging = function (e) {
hasMoved = true;
var moveDot = layer.transformToLocal(new Ycc.Math.Dot(e.x,e.y));
ui.pointList.push(moveDot);
ui.computeUIProps();
ycc.layerManager.reRenderAllLayerToStage();
};
layer.ondragend = function (e) {
if(!hasMoved) return null;
renderLayerToHtml();
ycc.photoManager.takePhoto();
hasMoved = false;
};
}
}
/**
* 删除图层的点击事件
* @param layerId
*/
function deleteLayer(layerId) {
layerId = parseInt(layerId);
ycc.layerManager.deleteLayer(ycc.findLayerById(layerId));
ycc.layerManager.reRenderAllLayerToStage();
document.getElementById("ycc-layer-"+layerId).remove();
if(getShowLayer().length===0)
document.getElementById('tip').style.display = "inline";
}
/**
* 获取用于显示的图层列表
*/
function getShowLayer() {
return ycc.layerList.filter(function (item) {
return item.name==='child';
});
}
/**
* 图层显示和隐藏
* */
function showLayer(layerId) {
layerId = parseInt(layerId);
ycc.findLayerById(layerId).show = !ycc.findLayerById(layerId).show;
ycc.layerManager.reRenderAllLayerToStage();
}
/**
* 绘制图层至右侧canvas
*/
function renderLayerToHtml() {
layerDom.innerHTML="";
for(var i=getShowLayer().length-1;i>=0;i--){
var layer = getShowLayer()[i];
var renderData = Ycc.utils.mergeObject({
x:0,
y:0,
name:0,
id:0
},layer,false);
renderData.tplID = "ycc-layer-"+layer.id;
console.log(renderData);
layerDom.innerHTML+=Ycc.utils.renderTpl(document.getElementById("layer-box-tpl").innerHTML,renderData);
}
for(var j=getShowLayer().length-1;j>=0;j--){
var _layer = getShowLayer()[j];
var _tplID = "ycc-layer-"+_layer.id;
var canvasList = document.getElementById(_tplID).getElementsByTagName("canvas");
var canvas = canvasList[0];
// canvas.style.width=canvas.width+'px';
canvas.width*=ycc.getSystemInfo().devicePixelRatio;
canvas.height*=ycc.getSystemInfo().devicePixelRatio;
var layerYcc = new Ycc().bindCanvas(canvas);
var newLayer = layerYcc.layerManager.newLayer({enableEventManager:true});
_layer.uiList.forEach(function (ui) {
newLayer.addUI(ui.clone());
});
layerYcc.layerManager.reRenderAllLayerToStage();
}
}
</script>