colorin

colors interpolate

gallery

Examples

base
pie
maptalks points
maptalks lines
maptalks polygons
zoom stops
custom imagedata size
covid-19 usa
echarts-bar
echarts-calendar
maptalks.js already has this feature built-in maptalks funtion-type demo

Install

• CDN

<script src="https://unpkg.com/colorin/dist/colorin.js"></script>

• NPM

npm i colorin
# or
yarn add colorin

Warning

in nodejs, you need dynamic registerCanvas,you can use @napi-rs/canvas or node-canvas

npm i @napi-rs/canvas
# or
yarn add @napi-rs/canvas

const {
    ColorIn,
    registerCanvas
} = require('colorin');
const {
    createCanvas
} = require('@napi-rs/canvas');
const canvas = createCanvas(1, 1);
registerCanvas(canvas);

API

ColorIn class

constructor(colors, [options])

• colors Color collection

import {
    ColorIn
} from 'colorin';

const colors = [
    [0, '#226412'],
    [2, '#4C931B'],
    [4, '#80BD3F'],
    [6, '#B9E287'],
    [8, '#E7F5D1'],
    [10, '#F7F7F7'],
    [13, '#226412'],
    [16, '#80BD3F'],
    [18, '#F1B7DB'],
    [22, '#DF78AF'],
    [24, '#C6147E'],
    [26, '#8F0051']
];
const ci = new ColorIn(colors);
const [r, g, b, a] = ci.getColor(11);

//if you use cdn
const ci = new colorin.ColorIn(colors);

method

• getColor(stop) get color by stop

const [r, g, b, a] = ci.getColor(11);

• getImageData() get canvas image data

    const imgData = ci.getImageData();