欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

微信小程序 Canvas增強組件實例詳解及源碼分享

 更新時間:2017年01月04日 09:44:47   作者:guyoung  
這篇文章主要介紹了微信小程序 Canvas增強組件實例詳解及源碼分享的相關資料,WeZRender是一個微信小程序Canvas增強組件,這里詳細介紹,需要的朋友可以參考下

WeZRender是一個微信小程序Canvas增強組件,基于HTML5 Canvas類庫ZRender。

使用

WXML:

 <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas>

JS:

 var wezrender = require('../../lib/wezrender');

  zr = wezrender.zrender.init("line-canvas-1", 375, 600);

特性

數(shù)據(jù)驅動

利用WeZRender繪圖,只需定義圖形數(shù)據(jù)。

 var circle = new wezrender.graphic.shape.Circle(   
    shape: {
      cx: 50,
      cy: 50,
      r: 50
    },
    style: {
      fill: 'red',
      lineWidth: 10
    }
  });

豐富的圖形選項

內置多種圖形元素(圓形、橢圓、圓環(huán)、扇形、矩形、多邊形、直線、曲線、心形、水滴、玫瑰線、Trochoid、文字、圖片等),統(tǒng)一且豐富的圖形屬性充分滿足個性化需求。

 var droplet = new wezrender.graphic.shape.Droplet({
    shape: {
      cx: 200,
      cy: 300,
      width: 50,
      height: 50
    },
    style: {
        fill: '#ff9999'
    }
  });

強大的動畫支持

提供promise式的動畫接口和常用緩動函數(shù),輕松實現(xiàn)各種動畫需求。

var image = new wezrender.graphic.Image({
    style: {
      x: 0,
      y: 0,
      image: '../../images/koala.jpg',
      width: 32,
      height: 24,
      text: 'koala'
    }
  });
  zr.add(image);

  image.animateStyle(true)
    .when(2000, {
      x: 350,
      y: 450,
      width: 360,
      height: 270,
    })
    .start();

易于擴展

分而治之的圖形定義策略允許擴展圖形元素。

var Pin = wezrender.graphic.Path.extend({
    type: 'pin',
    shape: {
      // x, y on the cusp
      x: 0,
      y: 0,
      width: 0,
      height: 0
    },
    buildPath: function (path, shape) {
      var x = shape.x;
      var y = shape.y;
      var w = shape.width / 5 * 3;
      // Height must be larger than width
      var h = Math.max(w, shape.height);
      var r = w / 2;

      // Dist on y with tangent point and circle center
      var dy = r * r / (h - r);
      var cy = y - h + r + dy;
      var angle = Math.asin(dy / r);
      // Dist on x with tangent point and circle center
      var dx = Math.cos(angle) * r;

      var tanX = Math.sin(angle);
      var tanY = Math.cos(angle);

      path.arc(
        x, cy, r,
        Math.PI - angle,
        Math.PI * 2 + angle
      );

      var cpLen = r * 0.6;
      var cpLen2 = r * 0.7;
      path.bezierCurveTo(
        x + dx - tanX * cpLen, cy + dy + tanY * cpLen,
        x, y - cpLen2,
        x, y
      );
      path.bezierCurveTo(
        x, y - cpLen2,
        x - dx + tanX * cpLen, cy + dy + tanY * cpLen,
        x - dx, cy + dy
      );
      path.closePath();
    }
  });

開源協(xié)議

本項目依據(jù)MIT開源協(xié)議發(fā)布,允許任何組織和個人免費使用。

項目地址

http://xiazai.jb51.net/201701/yuanma/WeZRender-master(jb51.net).rar

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

相關文章

  • 微信小程序實現(xiàn)多個按鈕toggle功能的實例

    微信小程序實現(xiàn)多個按鈕toggle功能的實例

    這篇文章主要介紹了微信小程序實現(xiàn)多個按鈕toggle功能的實例的相關資料,需要的朋友可以參考下
    2017-06-06
  • js 數(shù)組 fill() 填充方法

    js 數(shù)組 fill() 填充方法

    這篇文章主要介紹了js 數(shù)組 fill() 的填充方法,初始化數(shù)組的方法,但是初始化數(shù)組之后,數(shù)組中的每一項元素默認為 empty 空位占位,如何對數(shù)組這些空位添加默認的元素,ES6提供了 fill() 方法實現(xiàn)這一操作。本文總結數(shù)組 fill() 方法的詳細使用,需要的朋友可以參考一下
    2021-10-10
  • JavaScript原型Prototype詳情

    JavaScript原型Prototype詳情

    這篇文章主要介紹了JavaScript原型Prototype,在JavaScript中,函數(shù)是一個包含屬性和方法的Function類型的對象。而原型(Prototype?)就是Function類型對象的一個屬性。具體內容需要的朋友可以參考下面文章的介紹
    2021-12-12
  • Tree Shaking實現(xiàn)方法指南

    Tree Shaking實現(xiàn)方法指南

    這篇文章主要為大家介紹了Tree Shaking實現(xiàn)方法指南,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • Rxjs監(jiān)聽精確使用版本上線

    Rxjs監(jiān)聽精確使用版本上線

    這篇文章主要為大家介紹了Rxjs監(jiān)聽使用不精確版本上線晚3小時,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • 微信小程序 本地數(shù)據(jù)存儲實例詳解

    微信小程序 本地數(shù)據(jù)存儲實例詳解

    這篇文章主要介紹了微信小程序 本地數(shù)據(jù)存儲實例詳解的相關資料,需要的朋友可以參考下
    2017-04-04
  • 微信小程序 數(shù)據(jù)交互與渲染實例詳解

    微信小程序 數(shù)據(jù)交互與渲染實例詳解

    這篇文章主要介紹了微信小程序 數(shù)據(jù)交互與渲染實例詳解的相關資料,需要的朋友可以參考下
    2017-01-01
  • JavaScript?設計模式之洋蔥模型原理及實踐應用

    JavaScript?設計模式之洋蔥模型原理及實踐應用

    這篇文章主要介紹了JavaScript?設計模式之洋蔥模型原理及實踐應用,主要針對項目中遇到的問題,引申到koa-compose原理解析。通過學習洋蔥模式來解決我們實際項目中的問題
    2022-09-09
  • Svelte嵌套組件preventDefault構建Web應用

    Svelte嵌套組件preventDefault構建Web應用

    這篇文章主要介紹了Svelte嵌套組件preventDefault構建Web應用,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-12-12
  • Project?Reference優(yōu)化TypeScript編譯性能示例

    Project?Reference優(yōu)化TypeScript編譯性能示例

    這篇文章主要為大家介紹了Project?Reference優(yōu)化TypeScript編譯性能示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08

最新評論