mirror of
https://github.com/konvajs/konva.git
synced 2025-04-05 20:48:28 +08:00
eslint recommended
This commit is contained in:
parent
e47d54889c
commit
ae4f53b422
3
eslint.config.mjs
Normal file
3
eslint.config.mjs
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
export default tseslint.config(...tseslint.configs.recommended);
|
@ -59,13 +59,12 @@ Factory.addGetterSetter(
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
export const HSL: Filter = function (imageData) {
|
export const HSL: Filter = function (imageData) {
|
||||||
let data = imageData.data,
|
const data = imageData.data,
|
||||||
nPixels = data.length,
|
nPixels = data.length,
|
||||||
v = 1,
|
v = 1,
|
||||||
s = Math.pow(2, this.saturation()),
|
s = Math.pow(2, this.saturation()),
|
||||||
h = Math.abs(this.hue() + 360) % 360,
|
h = Math.abs(this.hue() + 360) % 360,
|
||||||
l = this.luminance() * 127,
|
l = this.luminance() * 127;
|
||||||
i;
|
|
||||||
|
|
||||||
// Basis for the technique used:
|
// Basis for the technique used:
|
||||||
// http://beesbuzz.biz/code/hsv_color_transforms.php
|
// http://beesbuzz.biz/code/hsv_color_transforms.php
|
||||||
@ -94,7 +93,7 @@ export const HSL: Filter = function (imageData) {
|
|||||||
|
|
||||||
let r: number, g: number, b: number, a: number;
|
let r: number, g: number, b: number, a: number;
|
||||||
|
|
||||||
for (i = 0; i < nPixels; i += 4) {
|
for (let i = 0; i < nPixels; i += 4) {
|
||||||
r = data[i + 0];
|
r = data[i + 0];
|
||||||
g = data[i + 1];
|
g = data[i + 1];
|
||||||
b = data[i + 2];
|
b = data[i + 2];
|
||||||
|
@ -9,11 +9,10 @@ import { Filter } from '../Node';
|
|||||||
* node.filters([Konva.Filters.Invert]);
|
* node.filters([Konva.Filters.Invert]);
|
||||||
*/
|
*/
|
||||||
export const Invert: Filter = function (imageData) {
|
export const Invert: Filter = function (imageData) {
|
||||||
let data = imageData.data,
|
const data = imageData.data,
|
||||||
len = data.length,
|
len = data.length;
|
||||||
i;
|
|
||||||
|
|
||||||
for (i = 0; i < len; i += 4) {
|
for (let i = 0; i < len; i += 4) {
|
||||||
// red
|
// red
|
||||||
data[i] = 255 - data[i];
|
data[i] = 255 - data[i];
|
||||||
// green
|
// green
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { Factory } from '../Factory';
|
import { Factory } from '../Factory';
|
||||||
import { Node, Filter } from '../Node';
|
import { Filter, Node } from '../Node';
|
||||||
import { Util } from '../Util';
|
import { Util } from '../Util';
|
||||||
import { getNumberValidator } from '../Validators';
|
import { getNumberValidator } from '../Validators';
|
||||||
|
|
||||||
@ -20,53 +20,41 @@ import { getNumberValidator } from '../Validators';
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
const ToPolar = function (src, dst, opt) {
|
const ToPolar = function (src, dst, opt) {
|
||||||
let srcPixels = src.data,
|
const srcPixels = src.data,
|
||||||
dstPixels = dst.data,
|
dstPixels = dst.data,
|
||||||
xSize = src.width,
|
xSize = src.width,
|
||||||
ySize = src.height,
|
ySize = src.height,
|
||||||
xMid = opt.polarCenterX || xSize / 2,
|
xMid = opt.polarCenterX || xSize / 2,
|
||||||
yMid = opt.polarCenterY || ySize / 2,
|
yMid = opt.polarCenterY || ySize / 2;
|
||||||
i,
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
r = 0,
|
|
||||||
g = 0,
|
|
||||||
b = 0,
|
|
||||||
a = 0;
|
|
||||||
|
|
||||||
// Find the largest radius
|
// Find the largest radius
|
||||||
let rad,
|
let rMax = Math.sqrt(xMid * xMid + yMid * yMid);
|
||||||
rMax = Math.sqrt(xMid * xMid + yMid * yMid);
|
let x = xSize - xMid;
|
||||||
x = xSize - xMid;
|
let y = ySize - yMid;
|
||||||
y = ySize - yMid;
|
const rad = Math.sqrt(x * x + y * y);
|
||||||
rad = Math.sqrt(x * x + y * y);
|
|
||||||
rMax = rad > rMax ? rad : rMax;
|
rMax = rad > rMax ? rad : rMax;
|
||||||
|
|
||||||
// We'll be uisng y as the radius, and x as the angle (theta=t)
|
// We'll be uisng y as the radius, and x as the angle (theta=t)
|
||||||
let rSize = ySize,
|
const rSize = ySize,
|
||||||
tSize = xSize,
|
tSize = xSize;
|
||||||
radius,
|
|
||||||
theta;
|
|
||||||
|
|
||||||
// We want to cover all angles (0-360) and we need to convert to
|
// We want to cover all angles (0-360) and we need to convert to
|
||||||
// radians (*PI/180)
|
// radians (*PI/180)
|
||||||
let conversion = ((360 / tSize) * Math.PI) / 180,
|
const conversion = ((360 / tSize) * Math.PI) / 180;
|
||||||
sin,
|
|
||||||
cos;
|
|
||||||
|
|
||||||
// var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
|
// var x1, x2, x1i, x2i, y1, y2, y1i, y2i, scale;
|
||||||
|
|
||||||
for (theta = 0; theta < tSize; theta += 1) {
|
for (let theta = 0; theta < tSize; theta += 1) {
|
||||||
sin = Math.sin(theta * conversion);
|
const sin = Math.sin(theta * conversion);
|
||||||
cos = Math.cos(theta * conversion);
|
const cos = Math.cos(theta * conversion);
|
||||||
for (radius = 0; radius < rSize; radius += 1) {
|
for (let radius = 0; radius < rSize; radius += 1) {
|
||||||
x = Math.floor(xMid + ((rMax * radius) / rSize) * cos);
|
x = Math.floor(xMid + ((rMax * radius) / rSize) * cos);
|
||||||
y = Math.floor(yMid + ((rMax * radius) / rSize) * sin);
|
y = Math.floor(yMid + ((rMax * radius) / rSize) * sin);
|
||||||
i = (y * xSize + x) * 4;
|
let i = (y * xSize + x) * 4;
|
||||||
r = srcPixels[i + 0];
|
const r = srcPixels[i + 0];
|
||||||
g = srcPixels[i + 1];
|
const g = srcPixels[i + 1];
|
||||||
b = srcPixels[i + 2];
|
const b = srcPixels[i + 2];
|
||||||
a = srcPixels[i + 3];
|
const a = srcPixels[i + 3];
|
||||||
|
|
||||||
// Store it
|
// Store it
|
||||||
//i = (theta * xSize + radius) * 4;
|
//i = (theta * xSize + radius) * 4;
|
||||||
@ -97,35 +85,23 @@ const ToPolar = function (src, dst, opt) {
|
|||||||
*/
|
*/
|
||||||
|
|
||||||
const FromPolar = function (src, dst, opt) {
|
const FromPolar = function (src, dst, opt) {
|
||||||
let srcPixels = src.data,
|
const srcPixels = src.data,
|
||||||
dstPixels = dst.data,
|
dstPixels = dst.data,
|
||||||
xSize = src.width,
|
xSize = src.width,
|
||||||
ySize = src.height,
|
ySize = src.height,
|
||||||
xMid = opt.polarCenterX || xSize / 2,
|
xMid = opt.polarCenterX || xSize / 2,
|
||||||
yMid = opt.polarCenterY || ySize / 2,
|
yMid = opt.polarCenterY || ySize / 2;
|
||||||
i,
|
|
||||||
x,
|
|
||||||
y,
|
|
||||||
dx,
|
|
||||||
dy,
|
|
||||||
r = 0,
|
|
||||||
g = 0,
|
|
||||||
b = 0,
|
|
||||||
a = 0;
|
|
||||||
|
|
||||||
// Find the largest radius
|
// Find the largest radius
|
||||||
let rad,
|
let rMax = Math.sqrt(xMid * xMid + yMid * yMid);
|
||||||
rMax = Math.sqrt(xMid * xMid + yMid * yMid);
|
let x = xSize - xMid;
|
||||||
x = xSize - xMid;
|
let y = ySize - yMid;
|
||||||
y = ySize - yMid;
|
const rad = Math.sqrt(x * x + y * y);
|
||||||
rad = Math.sqrt(x * x + y * y);
|
|
||||||
rMax = rad > rMax ? rad : rMax;
|
rMax = rad > rMax ? rad : rMax;
|
||||||
|
|
||||||
// We'll be uisng x as the radius, and y as the angle (theta=t)
|
// We'll be uisng x as the radius, and y as the angle (theta=t)
|
||||||
let rSize = ySize,
|
const rSize = ySize,
|
||||||
tSize = xSize,
|
tSize = xSize,
|
||||||
radius,
|
|
||||||
theta,
|
|
||||||
phaseShift = opt.polarRotation || 0;
|
phaseShift = opt.polarRotation || 0;
|
||||||
|
|
||||||
// We need to convert to degrees and we need to make sure
|
// We need to convert to degrees and we need to make sure
|
||||||
@ -137,18 +113,18 @@ const FromPolar = function (src, dst, opt) {
|
|||||||
|
|
||||||
for (x = 0; x < xSize; x += 1) {
|
for (x = 0; x < xSize; x += 1) {
|
||||||
for (y = 0; y < ySize; y += 1) {
|
for (y = 0; y < ySize; y += 1) {
|
||||||
dx = x - xMid;
|
const dx = x - xMid;
|
||||||
dy = y - yMid;
|
const dy = y - yMid;
|
||||||
radius = (Math.sqrt(dx * dx + dy * dy) * rSize) / rMax;
|
const radius = (Math.sqrt(dx * dx + dy * dy) * rSize) / rMax;
|
||||||
theta = ((Math.atan2(dy, dx) * 180) / Math.PI + 360 + phaseShift) % 360;
|
let theta = ((Math.atan2(dy, dx) * 180) / Math.PI + 360 + phaseShift) % 360;
|
||||||
theta = (theta * tSize) / 360;
|
theta = (theta * tSize) / 360;
|
||||||
x1 = Math.floor(theta);
|
x1 = Math.floor(theta);
|
||||||
y1 = Math.floor(radius);
|
y1 = Math.floor(radius);
|
||||||
i = (y1 * xSize + x1) * 4;
|
let i = (y1 * xSize + x1) * 4;
|
||||||
r = srcPixels[i + 0];
|
const r = srcPixels[i + 0];
|
||||||
g = srcPixels[i + 1];
|
const g = srcPixels[i + 1];
|
||||||
b = srcPixels[i + 2];
|
const b = srcPixels[i + 2];
|
||||||
a = srcPixels[i + 3];
|
const a = srcPixels[i + 3];
|
||||||
|
|
||||||
// Store it
|
// Store it
|
||||||
i = (y * xSize + x) * 4;
|
i = (y * xSize + x) * 4;
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { Factory } from '../Factory';
|
import { Factory } from '../Factory';
|
||||||
import { Node, Filter } from '../Node';
|
import { Filter, Node } from '../Node';
|
||||||
import { getNumberValidator } from '../Validators';
|
import { getNumberValidator } from '../Validators';
|
||||||
|
|
||||||
function pixelAt(idata, x, y) {
|
function pixelAt(idata, x, y) {
|
||||||
@ -181,8 +181,8 @@ function smoothEdgeMask(mask, sw, sh) {
|
|||||||
*/
|
*/
|
||||||
export const Mask: Filter = function (imageData) {
|
export const Mask: Filter = function (imageData) {
|
||||||
// Detect pixels close to the background color
|
// Detect pixels close to the background color
|
||||||
let threshold = this.threshold(),
|
const threshold = this.threshold();
|
||||||
mask = backgroundMask(imageData, threshold);
|
let mask = backgroundMask(imageData, threshold);
|
||||||
if (mask) {
|
if (mask) {
|
||||||
// Erode
|
// Erode
|
||||||
mask = erodeMask(mask, imageData.width, imageData.height);
|
mask = erodeMask(mask, imageData.width, imageData.height);
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { Factory } from '../Factory';
|
import { Factory } from '../Factory';
|
||||||
import { Node, Filter } from '../Node';
|
import { Filter, Node } from '../Node';
|
||||||
import { getNumberValidator } from '../Validators';
|
import { getNumberValidator } from '../Validators';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { Factory } from '../Factory';
|
import { Factory } from '../Factory';
|
||||||
import { Node, Filter } from '../Node';
|
import { Filter, Node } from '../Node';
|
||||||
import { getNumberValidator } from '../Validators';
|
import { getNumberValidator } from '../Validators';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Posterize Filter. Adjusts the channels so that there are no more
|
* Posterize Filter. Adjusts the channels so that there are no more
|
||||||
* than n different values for that channel. This is also applied
|
* than n different values for that channel. This is also applied
|
||||||
@ -15,16 +16,14 @@ import { getNumberValidator } from '../Validators';
|
|||||||
* node.filters([Konva.Filters.Posterize]);
|
* node.filters([Konva.Filters.Posterize]);
|
||||||
* node.levels(0.8); // between 0 and 1
|
* node.levels(0.8); // between 0 and 1
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const Posterize: Filter = function (imageData) {
|
export const Posterize: Filter = function (imageData) {
|
||||||
// level must be between 1 and 255
|
// level must be between 1 and 255
|
||||||
let levels = Math.round(this.levels() * 254) + 1,
|
const levels = Math.round(this.levels() * 254) + 1,
|
||||||
data = imageData.data,
|
data = imageData.data,
|
||||||
len = data.length,
|
len = data.length,
|
||||||
scale = 255 / levels,
|
scale = 255 / levels;
|
||||||
i;
|
|
||||||
|
|
||||||
for (i = 0; i < len; i += 1) {
|
for (let i = 0; i < len; i += 1) {
|
||||||
data[i] = Math.floor(data[i] / scale) * scale;
|
data[i] = Math.floor(data[i] / scale) * scale;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -15,18 +15,15 @@ import { RGBComponent } from '../Validators';
|
|||||||
* node.blue(120);
|
* node.blue(120);
|
||||||
* node.green(200);
|
* node.green(200);
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export const RGB: Filter = function (imageData) {
|
export const RGB: Filter = function (imageData) {
|
||||||
let data = imageData.data,
|
const data = imageData.data,
|
||||||
nPixels = data.length,
|
nPixels = data.length,
|
||||||
red = this.red(),
|
red = this.red(),
|
||||||
green = this.green(),
|
green = this.green(),
|
||||||
blue = this.blue(),
|
blue = this.blue();
|
||||||
i,
|
|
||||||
brightness;
|
|
||||||
|
|
||||||
for (i = 0; i < nPixels; i += 4) {
|
for (let i = 0; i < nPixels; i += 4) {
|
||||||
brightness =
|
const brightness =
|
||||||
(0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]) / 255;
|
(0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2]) / 255;
|
||||||
data[i] = brightness * red; // r
|
data[i] = brightness * red; // r
|
||||||
data[i + 1] = brightness * green; // g
|
data[i + 1] = brightness * green; // g
|
||||||
|
@ -12,17 +12,13 @@ import { Filter } from '../Node';
|
|||||||
* node.filters([Konva.Filters.Sepia]);
|
* node.filters([Konva.Filters.Sepia]);
|
||||||
*/
|
*/
|
||||||
export const Sepia: Filter = function (imageData) {
|
export const Sepia: Filter = function (imageData) {
|
||||||
let data = imageData.data,
|
const data = imageData.data,
|
||||||
nPixels = data.length,
|
nPixels = data.length;
|
||||||
i,
|
|
||||||
r,
|
|
||||||
g,
|
|
||||||
b;
|
|
||||||
|
|
||||||
for (i = 0; i < nPixels; i += 4) {
|
for (let i = 0; i < nPixels; i += 4) {
|
||||||
r = data[i + 0];
|
const r = data[i + 0];
|
||||||
g = data[i + 1];
|
const g = data[i + 1];
|
||||||
b = data[i + 2];
|
const b = data[i + 2];
|
||||||
|
|
||||||
data[i + 0] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
|
data[i + 0] = Math.min(255, r * 0.393 + g * 0.769 + b * 0.189);
|
||||||
data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
|
data[i + 1] = Math.min(255, r * 0.349 + g * 0.686 + b * 0.168);
|
||||||
|
Loading…
Reference in New Issue
Block a user