Web前端cooltree框架详解1：遮罩使用

ouyecw

已于 2023-04-14 09:29:58 修改

阅读量117

点赞数

分类专栏： cooltree 文章标签：前端 javascript 前端框架游戏

于 2023-04-06 11:12:09 首次发布

本文链接：https://blog.csdn.net/ouyecw/article/details/129984462

版权

cooltree 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文详细介绍了CooTree框架中如何使用Sprite实现遮罩效果，包括使用Rectangle和ShapeVO作为遮罩层。同时，文章讨论了框架的两种渲染模式——DOM和Canvas，并提供了相关代码示例。在示例中，展示了如何添加图片、设置遮罩以及调整对象的缩放和位置。

摘要由CSDN通过智能技术生成

cooltree框架详解

使用Sprite实现遮罩效果，Sprite本身是个容器，可以添加显示对象，也可以设置遮罩层，遮罩层可以是一个矩形Rectangle,也可是图形ShapeVO。
ShapeVO可以通过ShapeUtil来绘制生成，也可以直接使用path节点数据生成。

cooltree框架的两种渲染模式

DOM渲染模式
Global.useCanvas=false;

Canvas渲染模式
Global.useCanvas=true;

查看演示结果

const {ShapeUtil,ShapeVO,MathUtil,Rectangle,Transformer,SlideBar,UIOrientation,UIContainer,Effect,Factory,Button,Sprite,Global,Stage,StringUtil,RouteUtil,QuickUI,StageEvent} = ct;
let params,_container,transformer,_stage;

window.onload = function()
{
	params=RouteUtil.getQuery();
	init();
}

async function init()
{
	/**
	 * display mode
	 * true is canvas mode  false is DOM mode（default true）
	 */
	Global.useCanvas=false;//(params.render!=0);
	Global.breakTouch=false;
	/**
	 * init stage
	 */
	_stage=new Stage();
	
	/**
	 * set _container node
	 */
	_stage.div=document.getElementById("stage");
	
	/**
	 * init stage width and height
	 */
	_stage.initCanvas(window.innerWidth,window.innerHeight);
	
	QuickUI.getImage("./assets/img/draw.png",loadImage,true);
}

function loadImage(img)
{
	const shape=Factory.c("bs");
	shape.setup("#00FF88",210,320,8);
	shape.pattern=img;
	_stage.addChild(shape);
	shape.moveTo(20,20);
	
	const sprite=new Sprite();
	const obj=Factory.c("do");
	obj.setInstance(cloneImage(img));
	sprite.addChild(obj);
	_stage.addChild(sprite);
	sprite.moveTo(250,20);
	
	sprite.mask=new Rectangle(0,0,210,320);
	obj.scale=MathUtil.getSizeScale(obj.width,obj.height,210,320,false);
	obj.x=(210-obj.getWidth())*0.5;
	
	const container=new Sprite();
	const sub=Factory.c("do");
	sub.setInstance(cloneImage(img));
	container.addChild(sub);
	_stage.addChild(container);

	container.mask=ShapeUtil.getCircle(105,160,105,160);
	container.moveTo(480,20);
	sub.scale=obj.scale;
	sub.x=obj.x;
	
	const clip=new Sprite();
	const child=Factory.c("do");
	child.setInstance(cloneImage(img));
	clip.addChild(child);
	_stage.addChild(clip);
	
	clip.mask=ShapeVO.create("<path d='M 318.05 91.9Q 318.05 73.2 310.85 56.1 303.85 39.6 291.15 26.9 278.4 14.2 261.9 7.2 244.85 0 226.15 0 206.65 0 188.95 7.85 171.85 15.4 159 29.15 146.2 15.45 129.1 7.85 111.4 0 91.9 0 73.2 0 56.1 7.2 39.6 14.2 26.9 26.9 14.2 39.6 7.2 56.1 0 73.2 0 91.9 0 114.55 10.45 134.45 20.55 153.75 38.25 166.45L 157 274.8 277.75 167.9Q 296.3 155.3 307 135.55 318.05 115.2 318.05 91.9 Z'/>");
	clip.moveTo(710,20);
	child.scale=obj.scale;
}

function cloneImage(img)
{
	if(Global.useCanvas) return img;
	const pic=new Image(img.width,img.height);
	pic.src=img.src;
	return pic;
}

window.onresize=function()
{
	const h=Math.max(window.innerHeight,500);
	const w=Math.max(window.innerWidth,500);
	Global.reszie(w,h);
}