dntzhang / cax Goto Github PK
View Code? Open in Web Editor NEWCanvas 渲染引擎,支持 SVG,兼容了小程序、小游戏和 Web
Canvas 渲染引擎,支持 SVG,兼容了小程序、小游戏和 Web
在web端使用时,如果同时引入了微信的JS SDK(https://res.wx.qq.com/open/js/jweixin-1.3.2.js) 的话,因为cax中包含了wx.createCanvasContext等操作,而JS SDK中另外定义了一个变量wx,导致cax对wx的方法操作会报错,请问可以另外提供一份无wx的cax库,或者有办法在web环境下不调用到wx.createCanvasContext等方法吗?
使用redirectTo在两个页面中来回切换
A页面有canvas,onLoad中做的初始化和渲染。
B页面没有canvas。
进入小程序先进入B页面,再redirectTo到A页面,这个时候A页面的canvas是有渲染有显示的。
再从A页面redirectTo到B页面,再redirectTo到A页面,这个时候A页面的canvas是就没有显示了。
我在onUnload中销毁了我创建的Stage,Group以及Bitmap仍然没有显示。
将初始化和渲染写在onReady中,第二次redirectTo到A页面也没有任何显示。
求解,拜托了。
为什么手机上所有图片都不显示了“?
例如:
globalToLocal 全局stage坐标 转到 显示对象内坐标
localToGlobal 显示对象内坐标 转到 全局stage坐标
在互动过程中会比较常使用到
小程序的onload方法没有回调
class Bitmap extends DisplayObject {
constructor (img, onLoad) {
super()
if (typeof img === 'string') {
if (Bitmap.cache[img]) {
this.img = Bitmap.cache[img]
this.rect = [0, 0, this.img.width, this.img.height]
onLoad && onLoad.call(this)
this.width = this.img.width
this.height = this.img.height
} else if (util.isWeapp) {
util.getImageInWx(img, (result) => {
this.img = result.img
if (!this.rect) {
this.rect = [0, 0, result.width, result.height]
}
})
} else {
如题
゚ω゚ノ= /`m´)ノ ~┻━┻ //*´∇`*/ ['_']; o=(゚ー゚) =_=3; c=(゚Θ゚) =(゚ー゚)-(゚ー゚); (゚Д゚) =(゚Θ゚)= (o^_^o)/ (o^_^o);(゚Д゚)={゚Θ゚: '_' ,゚ω゚ノ : ((゚ω゚ノ==3) +'_') [゚Θ゚] ,゚ー゚ノ :(゚ω゚ノ+ '_')[o^_^o -(゚Θ゚)] ,゚Д゚ノ:((゚ー゚==3) +'_')[゚ー゚] }; (゚Д゚) [゚Θ゚] =((゚ω゚ノ==3) +'_') [c^_^o];(゚Д゚) ['c'] = ((゚Д゚)+'_') [ (゚ー゚)+(゚ー゚)-(゚Θ゚) ];(゚Д゚) ['o'] = ((゚Д゚)+'_') [゚Θ゚];(゚o゚)=(゚Д゚) ['c']+(゚Д゚) ['o']+(゚ω゚ノ +'_')[゚Θ゚]+ ((゚ω゚ノ==3) +'_') [゚ー゚] + ((゚Д゚) +'_') [(゚ー゚)+(゚ー゚)]+ ((゚ー゚==3) +'_') [゚Θ゚]+((゚ー゚==3) +'_') [(゚ー゚) - (゚Θ゚)]+(゚Д゚) ['c']+((゚Д゚)+'_') [(゚ー゚)+(゚ー゚)]+ (゚Д゚) ['o']+((゚ー゚==3) +'_') [゚Θ゚];(゚Д゚) ['_'] =(o^_^o) [゚o゚] [゚o゚];(゚ε゚)=((゚ー゚==3) +'_') [゚Θ゚]+ (゚Д゚) .゚Д゚ノ+((゚Д゚)+'_') [(゚ー゚) + (゚ー゚)]+((゚ー゚==3) +'_') [o^_^o -゚Θ゚]+((゚ー゚==3) +'_') [゚Θ゚]+ (゚ω゚ノ +'_') [゚Θ゚]; (゚ー゚)+=(゚Θ゚); (゚Д゚)[゚ε゚]='\\'; (゚Д゚).゚Θ゚ノ=(゚Д゚+ ゚ー゚)[o^_^o -(゚Θ゚)];(o゚ー゚o)=(゚ω゚ノ +'_')[c^_^o];(゚Д゚) [゚o゚]='\"';(゚Д゚) ['_'] ( (゚Д゚) ['_'] (゚ε゚+(゚Д゚)[゚o゚]+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (o^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (o^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ ((o^_^o) +(o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚Θ゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (o^_^o))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (c^_^o)+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ ((o^_^o) - (゚Θ゚))+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((o^_^o) +(o^_^o))+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (゚Θ゚))+ (c^_^o)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚ー゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ (゚ー゚)+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚Θ゚)+ ((゚ー゚) + (o^_^o))+ (゚Θ゚)+ (゚Д゚)[゚ε゚]+(゚ー゚)+ ((゚ー゚) + (o^_^o))+ (゚Д゚)[゚ε゚]+((゚ー゚) + (゚Θ゚))+ (゚Θ゚)+ (゚Д゚)[゚o゚]) (゚Θ゚)) ('_');
cax.loadImg({
img: '/resources/images/test/play.png',
complete: (img) => {
}
})
加载本地图片会报
Image is not defined
如果在小程序使用下面的代码是无法加载本地图片的:
const bitmap = new cax.Bitmap('./local.png', () => {
看了下util里面的代码,用判断是否是wxfile://开头来判断是否是网络图片,在小程序里面就走downloadfile了。
export function getImageInWx (img, callback) {
if (img.indexOf('wxfile://') === 0) {
wx.getImageInfo({
src: img,
success: (info) => {
callback({
img: img,
width: info.width,
height: info.height
})
}
})
mpvue中怎么使用base64图片?直接用base64的地址不行
电脑的模拟器可以 但是到手机这边怎么点都没反应 ,是哪里操作出现了问题吗?
const button = new cax.Button({ width: 100, height: 40, text: "Click Me!" })
这样会报错
var lastchild = group.children[group.children.length -1];
group.remove(lastchild)
stage.update()
小程序的api里面,drawImage是可以用tempFilePaths的,直接调用也能画出来,但是bitmap没法实现,是需要怎么兼容么?
如题,看例子中有些是不规则形状,但触发事件的小手手也是能贴合形状的。
没能找到相应源码位置,能劳烦阐述下原理吗。大佬威武!
跪求跟完善的使用文档
可以设置坐标的锚点在物体的中心吗?类似pixi的anchor
代码里面写死white了。
最好strokeStyle也支持下,要不每次绘制后都会有黑边。
this.closePath();
this.fillStyle('white');
this.fill();
Textbox 应该还是比较常用的,渲染多行文本会经常用到。
如题,可以的话怎么引用,谢谢
'Quadratic', 'Cubic', 'Quartic', 'Quintic', 'Sinusoidal', 'Exponential', 'Circular', 'Elastic', 'Back', 'Bounce'
和 In,Out,InOut
分别是代表什么样的动画效果?
你好,我用定时器创建bitmap,然后做下落动画(类似红包雨),在模拟器没问题,真机调试特别卡(机型iPhone 6S plus)
希望能够入群请教!
textObj.getWidth() 在真机下为0,模拟器正常
const icon = new cax.Bitmap(src)
const clipPath = new cax.Graphics()
clipPath.arc(ICON_SIZE, ICON_SIZE, ICON_SIZE, 0, Math.PI * 2)
icon.clip(clipPath)
我用如上代码裁剪一个bitmap,结果能看见图片周边清晰的锯齿,有什么办法解决吗?
小程序的bitmap的生成后,不会存入Bitmap.cache[]。生成内容多的时候非常的卡。
尤其是从网络读取图片的时候。
} else if (_util2.default.isWeapp) {
_util2.default.getImageInWx(img, function (result) {
_this.img = result.img;
if (!_this.rect) {
_this.rect = [0, 0, result.width, result.height];
}
onLoad && onLoad.call(_this);
});
} else {
import cax from './index'
export default class poker extends cax.Group {
constructor() {
super()
const bitmap = new cax.Bitmap('../../image/user_avatar_test.png')
bitmap.scaleX = bitmap.scaleY = 0.5
this.add(this.bitmap)
}
}
error:
Cannot set property 'parent' of undefined;at "pages/live/live" page lifeCycleMethod onLoad function
TypeError: Cannot set property 'parent' of undefined
at poker.add (http://127.0.0.1:35894/appservice/components/cax/index.js:298:35)
at new poker (http://127.0.0.1:35894/appservice/components/cax/poker.js:29:11)
at r.onLoad (http://127.0.0.1:35894/appservice/pages/live/live.js:67:17)
at r. (
请问是否支持设置z-index?
有截屏需求,请问怎么实现截图当前屏幕?
if (typeof wx !== 'undefined' && wx.createCanvas) {
_this.canvas = wx.createCanvas();
} else {
_this.canvas = document.createElement('canvas');
}
小程序中没有wx.createCanvas
// 圆的半径
const bgWidth = 640
const bgHeight = 758
const radii = 120
const imageWith = width
const imageHeight = width
const fontSize = 36
const innerRadii = 46
const stage = new Stage(bgWidth, bgHeight, 'myCanvas', this)
const bgBitmap = new Bitmap(bgSrc)
stage.add(bgBitmap)
const headBitmap = new Bitmap(this.headerImage, () => {
stage.update()
})
const clipHeadPath = new Graphics()
clipHeadPath.arc(bgWidth/2, marginTop + radii, innerRadii, 0, 2 * Math.PI)
headBitmap.clip(clipHeadPath)
stage.add(headBitmap)
stage.scale = 0.5
stage.update()
代码如上,死活裁剪不出来,去掉clipHeadPath,图片正常显示!
你好,请问支持小程序mpvue吗
Line 6059 in cfb692e
这里的backgroundColor应该是bgColor吧
使用Loader从cdn加载图片资源是提示
... No 'Access-Control-Allow-Origin' header is present on the requested ...
加载MP3资源就没问题
代码如
var stage = new ARE.Stage("#canvas");
var bmp = new ARE.Bitmap("btn.png");
bmp.x = bmp.y = 100;
var bmp2 = bmp.clone();
bmp2.x = 300;
bmp2.y = 100;
state.add(bmp);
state.add(bmp2);
当前Master分支中的代码绑定事件不会触发到,麻烦库主尽快修复。另几个Demo希望更新,由于使用了ARE代替原are全局变量,好几个demo跑不起来。若可以,整理一份API文档就更好了,没有API文档,都不知道有什么API,只能边写边看源码,效率低下。
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.