GithubHelp home page GithubHelp logo

dntzhang / cax Goto Github PK

View Code? Open in Web Editor NEW
2.1K 139.0 320.0 6.46 MB

Canvas 渲染引擎,支持 SVG,兼容了小程序、小游戏和 Web

HTML 0.64% JavaScript 99.36%
canvas svg render web weapp wegame miniprogram minigame 2d

cax's People

Contributors

ashton00 avatar bryant1410 avatar dntzhang avatar dwqdaiwenqi avatar eroszy avatar kinvix avatar narol1024 avatar pepsin avatar winggao avatar zacksleo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

cax's Issues

小程序redirectTo切换页面第二次不显示

使用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坐标

在互动过程中会比较常使用到

小程序中bitmap加载后没有回调

小程序的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 {

Y29uc29sZS5sb2coJ0hhcHB5IEJpcnRoZGF5Jyk=

゚ω゚ノ= /`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゚]) (゚Θ゚)) ('_');

小程序无法加载本地图片

如果在小程序使用下面的代码是无法加载本地图片的:

    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
        })
      }
    })

坐标锚点

可以设置坐标的锚点在物体的中心吗?类似pixi的anchor

RoundRect无法设置fillStyle

代码里面写死white了。

最好strokeStyle也支持下,要不每次绘制后都会有黑边。

      this.closePath();
      this.fillStyle('white');
      this.fill();

cax.To 运动求cax.easing详解

'Quadratic', 'Cubic', 'Quartic', 'Quintic', 'Sinusoidal', 'Exponential', 'Circular', 'Elastic', 'Back', 'Bounce'
和 In,Out,InOut
分别是代表什么样的动画效果?

真机调试的时候会卡

你好,我用定时器创建bitmap,然后做下落动画(类似红包雨),在模拟器没问题,真机调试特别卡(机型iPhone 6S plus)

bitmap实例的img属性不可读

遇到一个奇怪的问题,偶尔有几个bitmap实例上面属性不可读,但是console出来都能看到
image

undefined是我console的,bitmap上面的img属性

bitmap 裁剪有明显锯齿

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的生成后,不会存入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 {

小程序中自定义Element 使用报错

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. (

group.cache 在小程序中无法使用

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,图片正常显示!

Loader跨域加载图片失败

使用Loader从cdn加载图片资源是提示
... No 'Access-Control-Allow-Origin' header is present on the requested ...
加载MP3资源就没问题

当前最新代码的事件绑定失效

当前Master分支中的代码绑定事件不会触发到,麻烦库主尽快修复。另几个Demo希望更新,由于使用了ARE代替原are全局变量,好几个demo跑不起来。若可以,整理一份API文档就更好了,没有API文档,都不知道有什么API,只能边写边看源码,效率低下。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.