Research
Recent Trends in Malicious Packages Targeting Discord
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
@tbminiapp/pixi-miniprogram-engine
Advanced tools
Readme
本模板主要使用Pixi引擎作为基础,实现手淘Canvas绘制,我们对Pixi原有4.8.8引擎进行了改写,实现了对Canvas的兼容。项目开发非常接近web Pixi。
@tbminiapp/pixi-miniprogram-engine
阿里小程序IDE:https://miniapp.open.taobao.com/docV3.htm?docId=117780&docType=1
配置流程,启用Canvas -> 页面Canvas组件 ->侦听Canvas组件onReady事件->my._createCanvas ->成功回调后,设置canvas尺寸->使用PIXI.miniprogram.registerCanvas将Canvas注册给pixi->实例化PIXI.Application(注意options中forceCanvas强制使用2d上下文,resolution为当前设备像素密度)->侦听Canvas的onTouchStart\onTouchEnd\onTouchMove 事件通过onTouchHandle侦听
app.json 增加配置项:"enableSkia": "true"
{
"pages": [
"pages/test/index"
],
"window": {
"defaultTitle": "My App",
"enableSkia": "true"
}
}
2.1:npm包安装
npm install @tbminiapp/pixi-miniprogram-engine --by=yarn
npm install @types/pixi.js@4.7.5 --by=yarn
#### 3.为Canvas节点 增加onReady事件监听 (type依然可以保持webgl 不受影响),onTouchStart\onTouchEnd\onTouchMove 事件通过onTouchHandle侦听(onTouchHandle在下方js中有实现)
```javascript
<canvas id="canvas" type="webgl" onReady="onCanvasReady" class="canvas" onTouchStart="onTouchHandle" onTouchMove="onTouchHandle" onTouchEnd="onTouchHandle"></canvas>
//引入pixi引擎
import * as PIXI from "@tbminiapp/pixi-miniprogram-engine";
// registerCanvas 注册canvas给PIXI
const { registerCanvas, devicePixelRatio } = PIXI.miniprogram;
Page({
// 供pixi渲染的canvas
pixiCanvas:null,
// canvas的onReady事件侦听函数 onCanvasReady
onCanvasReady() {
// 建立canvas引用
my._createCanvas({
id: "canvas",
success: (canvas) => {
const systemInfo = my.getSystemInfoSync();
// 拿到当前设备像素密度
const dpr = systemInfo.pixelRatio;
// 拿到当前设备的宽高
const windowWidth = systemInfo.windowWidth;
const windowHeight = systemInfo.windowHeight;
// 为canvas设定宽高(需要设备宽高* 像素密度);
canvas.width = windowWidth * dpr;
canvas.height = windowHeight * dpr;
this.pixiCanvas = canvas;
//为pixi引擎注册当前的canvas
registerCanvas(canvas);
//初始化PIXI.Application
//计算application的宽高
const size = {
width: canvas.width / devicePixelRatio,
height: canvas.height / devicePixelRatio,
};
// 2d:使用2d上下文绘制
// webgl:使用webgl上下文绘制
const contextType = '2d';
// 如果使用2d 上下文,则配置引擎强制2d
const forceCanvas = contextType === '2d' ? true : false;
const context = canvas.getContext(contextType);
const application = new PIXI.Application({
width: size.width,
height: size.height,
view: canvas,
context: context,
transparent: true,
// 强制使用2d上下文进行渲染,如果为flase,则默认使用webgl渲染
forceCanvas: forceCanvas,
// 设置resolution 为像素密度
resolution: devicePixelRatio,
});
},
});
},
// 监听小程序canvas的touch事件,并触发pixi内部事件
onTouchHandle(event) {
if (this.pixiCanvas && event.changedTouches && event.changedTouches.length) {
this.pixiCanvas.dispatchEvent(event);
}
}
});
FAQs
pixi.js引擎阿里小程序版(基于PixiJs v4.8.8版本)
We found that @tbminiapp/pixi-miniprogram-engine demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.
Security News
Socket CEO Feross Aboukhadijeh joins a16z partners to discuss how modern, sophisticated supply chain attacks require AI-driven defenses and explore the challenges and solutions in leveraging AI for threat detection early in the development life cycle.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.