Wondering what’s next for npm?Check out our public roadmap! »

test-gcanvas-node

1.0.1 • Public • Published

GCanvas-node 源代码与运行文档

环境搭建

  • node 版本 >=10.0
  • 系统环境:ubuntu >=18:04
  • 工具链:cmake
  • 依赖安装
    • sudo apt-get update && apt-get install -y libglfw3-dev libgles2-mesa-dev libboost-all-dev libfreetype6-dev libcurl4-openssl-dev libjpeg-dev
    • freetype字体库

环境搭建 Docker化

Dockerfile


FROM ubuntu:18.04

ADD ./sources.list /etc/apt/sources.list

RUN apt-get update && apt-get install -y libglfw3-dev libgles2-mesa-dev libboost-all-dev xvfb wget


ADD cmake.zip ./cmake/

RUN apt-get install -y zip && cd ./cmake/ && unzip cmake.zip 


ENV PATH="/cmake/cmake/bin/:${PATH}"

RUN apt-get install -y curl && curl -sL https://deb.nodesource.com/setup_10.x | bash -

RUN apt-get install -y nodejs 

RUN export DISPLAY=':99.0' && Xvfb :99 -screen 0 1024x768x24 > /dev/null 2>&1 &

ADD ./freetype.tar ./freetype/

RUN cd ./freetype/freetype-2.8.1  && ./configure && make && make install

RUN npm config set registry https://registry.npm.taobao.org && npm install -g cmake-js
#install curl-dev lib 
RUN apt-get install libcurl4-openssl-dev libjpeg-dev


Node-canvas 源代码构建以及测试运行

node-canvas使用node-addon的binding的api以及使用cmake-js进行构建。

构建步骤如下

 npm install cmake-js -g //安装cmake-js
 local=true npm install // 安装项目所需要的依赖,local=true表示本地构建
 npm run dev // 构建node-addon的binding中间键

运行步骤

  case=app.js npm run test //运行example下的js文件,输出运行结果,可以从导出的png图片中看
  case=app.js npm run test-headless//如果没有diplay(系统视窗)环境,可以运行这行

GCanvas-node 使用文档

  • quick start
  
const { createCanvas, Image } = require('bindings')('canvas');
const canvas = createCanvas(400, 400);
const ctx = canvas.getContext('2d')
 
ctx.fillRect(0, 0, 150, 150) // Draw a rectangle with default settings
ctx.save() // Save the default state
 
ctx.fillStyle = '#09F' // Make changes to the settings
ctx.fillRect(15, 15, 120, 120) // Draw a rectangle with new settings
 
ctx.save() // Save the current state
ctx.fillStyle = '#FFF' // Make changes to the settings
ctx.globalAlpha = 0.5
ctx.fillRect(30, 30, 90, 90) // Draw a rectangle with new settings
 
ctx.restore() // Restore previous state
ctx.fillRect(45, 45, 60, 60) // Draw a rectangle with restored settings
 
ctx.restore() // Restore original state
ctx.fillRect(60, 60, 30, 30) // Draw a rectangle with restored settings
 
canvas.createPNG("demo1")
  • 标准API
    • 此项目是Web Canvas API的实现,并尽可能紧密地实现该API。有关API文档,请访问Mozilla Web Canvas API。(有关当前API遵从性,请参阅兼容性状态)
    • 标准API支持情况
      • function
        • getContext()
        • fillRect()
        • arc()
        • arcTo()
        • beginPath()
        • bezierCurveTo()
        • quadraticCurveTo()
        • clearRect()
        • clip()
        • closePath()
        • createImageData()
        • createLinearGradient()
        • createPattern()
        • createRadialGradient()
        • drawImage()
        • ellipse:not support
        • fill()
        • fillText()
        • getImageData()
        • getLineDash()
        • lineTo()
        • measureText()
        • moveTo()
        • putImageData()
        • rect()
        • resetTransform()
        • restore()
        • rotate()
        • save()
        • scale()
        • setLineDash()
        • setTransform()
        • stroke()
        • strokeRect()
        • strokeText()
        • transform()
        • translate()
      • propetry
        • width
        • height
        • fillStyle
        • font
        • globalAlpha
        • globalCompositeOperation
        • lineCap
        • lineDashOffset
        • lineJoin
        • lineWidth
        • miterLimit
        • shadowBlur
        • shadowColor
        • shadowOffsetX
        • shadowOffsetY
        • strokeStyle
        • textAlign
        • textBaseline

非标准API

##### createCanvas

  createCanvas(width: number, height: number) => Canvas
 
  let canvas = createCanvas(400, 400);//

##### Image

 
 img.src: string
 img.onload:Function
 img.onerror:Function 
 
  const img = new Image()
  img.onload = () => {
    ctx.drawImage(img, 0, 0);
    canvas.createPNG("demo2");
  }
  img.onerror = err => {
   console.log(err)
  }
 img.src = 'https://alibaba.github.io/GCanvas/assets/logo-gcanvas.png'
 
const fs = require('fs')
const path = require('path')
const { createCanvas, Image } = require('bindings')('canvas');
const img = new Image()
const canvas = createCanvas(500, 500)
const ctx = canvas.getContext('2d')
 
img.onload = () => {
 ctx.drawImage(img, 0, 0)
 canvas.createPNG("local")
}
img.onerror = err => {
 throw err
}
 
img.src = path.join(__dirname,'images', 'image.png')
 
 
  • ps:img的src现在仅仅支持png格式图片
createPNG
  createPNG(name:string) => void
 let canvas = createCanvas(400, 400);
var ctx = canvas.getContext('2d');
ctx.fillStyle="#ff0000"
 ctx.fillRect(0, 0, 150, 150) 
 canvas.createPNG("demo1") //生成一张png的图片

Install

npm i test-gcanvas-node

DownloadsWeekly Downloads

2

Version

1.0.1

License

none

Unpacked Size

41.9 MB

Total Files

1697

Last publish

Collaborators

  • avatar