ycc.js
Version:
Mini and powerful canvas engine for creating App or Game.
132 lines (103 loc) • 2.88 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 rel="stylesheet" href="../style.css">
</head>
<body>
<div class="return-btn">
<a href="../">
返回首页
</a>
</div>
<div class="tip">
<h3>示例说明：</h3>
<div>
1、这个示例展示框选操作，实质是一个框选的UI。<br>
2、每次点击框选按钮后，PC端可以在绘图区拖动鼠标框选，移动端可以拖拽框选。<br>
3、框选结束后，可以拖动红色区域改变选区位置，也可以拖动边角更改选框大小。<br>
4、选区下方可以添加按钮，这里的代码被注释了。<br>
</div>
<br><br>
</div>
<button onclick="rect()">框选</button>
<br>
</body>
</html>
<script src="../common.js"></script>
<script src="../../build/ycc.js"></script>
<script>
var ycc = new Ycc();
var maxWidth = 300;
var scale = 1;
ycc.loader.loadResParallel([{name:"paper",url:"./paper.gif"}],onLoad);
function onLoad(arr,res) {
var canvas = document.createElement("canvas");
scale = maxWidth/res.paper.width;
canvas.width = maxWidth;
canvas.height = res.paper.height*scale;
document.body.appendChild(canvas);
ycc.bindCanvas(canvas);
var _layer = ycc.layerManager.newLayer();
_layer.addUI(new Ycc.UI.Image({
res:res.paper,
rect:new Ycc.Math.Rect(0,0,canvas.width,canvas.height),
fillMode:"scale"
}));
ycc.layerManager.reRenderAllLayerToStage();
}
/**
* 画方框
*/
function rect() {
var cropRect,startX=0,startY=0;
// 禁止其他图层的事件
ycc.layerManager.enableEventManagerAll(false)
// 新建框图的图层
.newLayer({
enableEventManager:true,
ondragstart:function (e) {
startX=e.x;
startY=e.y;
cropRect = new Ycc.UI.CropRect({
name:''+Date.now(),
ctrlSize:10,
fill:false,
strokeStyle:"red",
fillStyle:"red",
lineWidth:10,
rectBgColor:"rgba(255, 1, 1, 1);",
rectBgAlpha:0.2
});
this.addUI(cropRect);
cropRect.setCtrlBtns([
{
content:"保存",
ontap:function () {
console.log(this);
}
},
{content:"增宽",ontap:function (e) {
console.log(this);
}},
{content:"变窄"},
{content:"删除"}
]);
},
ondragging:function (e) {
var startDot = new Ycc.Math.Dot(startX,startY);
var endDot = new Ycc.Math.Dot(e.x,e.y);
cropRect.rect = new Ycc.Math.Rect(startDot.x,startDot.y,endDot.x-startDot.x,endDot.y-startDot.y);
this.yccInstance.layerManager.reRenderAllLayerToStage();
},
ondragend:function (e) {
// 恢复所有图层的事件监听
this.yccInstance.layerManager.enableEventManagerAll(true);
this.ondragging = null;
this.ondragstart = null;
}
});
}
</script>