rect 支持渐变色，修复一些bug
This commit is contained in:
CPPAlien
parent
a1460da565
commit
9b30e002c1
186
lib/gradient.js
186
lib/gradient.js
@ -6,119 +6,95 @@
|
||||
!(function () {
|
||||
|
||||
var api = {
|
||||
toPoint: function(percent) {
|
||||
let str = percent.replace('%', '');
|
||||
str /= 100;
|
||||
return str;
|
||||
isGradient: function(bg) {
|
||||
if (bg.startsWith('linear') || bg.startsWith('radial')) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
analizeRadial: function(bg, width, height) {
|
||||
let count = 0;
|
||||
const coordinate = bg.match(/(?:(\d{1,3})[,])/g);
|
||||
const colors = bg.match(/((?:#(?:\w{6}|\w{3}))|(?:rgba[(](?:(?:\d{1,3})\W\s){3}\d[)]))/g);
|
||||
const status = bg.match(/\d{1,3}[%]/g);
|
||||
for (let i = 0; i < colors.length; i++) {
|
||||
if (colors[i].startsWith('rgba')) {
|
||||
count += 3;
|
||||
}
|
||||
doGradient: function(bg, width, height, ctx) {
|
||||
if (bg.startsWith('linear')) {
|
||||
linearEffect(width, height, bg, ctx);
|
||||
} else if (bg.startsWith('radial')) {
|
||||
radialEffect(width, height, bg, ctx);
|
||||
}
|
||||
const length = coordinate.length - count;
|
||||
switch (length) {
|
||||
case 3: radialParams.coordinate = [coordinate[0].replace(',', ''), coordinate[1].replace(',', ''), coordinate[2].replace(',', '')]; break;
|
||||
case 2: radialParams.coordinate = [coordinate[0].replace(',', ''), coordinate[1].replace(',', ''), Math.sqrt(width * width / 4 + height * height / 4)]; break;
|
||||
case 1: radialParams.coordinate = [0, 0, coordinate[0].replace(',', '')]; break;
|
||||
default: radialParams.coordinate = [0, 0, Math.sqrt(width * width / 4 + height * height / 4)]; break;
|
||||
}
|
||||
radialParams.colors = colors;
|
||||
radialParams.status = status;
|
||||
return radialParams.coordinate;
|
||||
},
|
||||
|
||||
radialEffect: function(width, height, grd, ctx) {
|
||||
if (radialParams.status && radialParams.status[0] && radialParams.status.length === radialParams.colors.length) {
|
||||
for (let i = 0; i < radialParams.colors.length; i++) {
|
||||
grd.addColorStop(this.toPoint(radialParams.status[i]), radialParams.colors[i]);
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < radialParams.colors.length; i++) {
|
||||
grd.addColorStop(i / (radialParams.colors.length - 1), radialParams.colors[i]);
|
||||
}
|
||||
}
|
||||
ctx.setFillStyle(grd);
|
||||
ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
},
|
||||
|
||||
analizeLinear: function(bg, width, height) {
|
||||
const direction = bg.match(/([-]?\d{1,3})deg/);
|
||||
const colors = bg.match(/((?:#(?:\w{6}|\w{3}))|(?:rgba[(](?:(?:\d{1,3})\W\s){3}\d[)]))/g);
|
||||
const status = bg.match(/\d{1,3}[%]/g);
|
||||
const dir = direction && direction[1] ? parseFloat(direction[1]) : 0;
|
||||
switch (dir) {
|
||||
case 0: console.log('case 0:'); linearParams.coordinate = [0, -height / 2, 0, height / 2]; break;
|
||||
case 90: console.log('case 90:'); linearParams.coordinate = [width / 2, 0, -width / 2, 0]; break;
|
||||
case -90: console.log('case -90:'); linearParams.coordinate = [-width / 2, 0, width / 2, 0]; break;
|
||||
case 180: console.log('case 180:'); linearParams.coordinate = [0, height / 2, 0, -height / 2]; break;
|
||||
case -180: console.log('case -180:'); linearParams.coordinate = [0, -height / 2, 0, height / 2]; break;
|
||||
default:
|
||||
console.log('default:');
|
||||
let x1 = 0;
|
||||
let y1 = 0;
|
||||
let x2 = 0;
|
||||
let y2 = 0;
|
||||
if (direction[1] > 0 && direction[1] < 90) {
|
||||
x1 = (width / 2) - ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
} else if (direction[1] > -180 && direction[1] < -90) {
|
||||
x1 = -(width / 2) + ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
} else if (direction[1] > 90 && direction[1] < 180) {
|
||||
x1 = (width / 2) + (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
} else {
|
||||
x1 = -(width / 2) - (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
}
|
||||
linearParams.coordinate = [x1, y1, x2, y2];
|
||||
break;
|
||||
}
|
||||
linearParams.colors = colors;
|
||||
linearParams.status = status;
|
||||
return linearParams.coordinate;
|
||||
},
|
||||
|
||||
linearEffect: function(width, height, grd, ctx) {
|
||||
if (linearParams.status && linearParams.status[0] && linearParams.status.length === linearParams.colors.length) {
|
||||
for (let i = 0; i < linearParams.colors.length; i++) {
|
||||
grd.addColorStop(this.toPoint(linearParams.status[i]), linearParams.colors[i]);
|
||||
}
|
||||
} else {
|
||||
for (let i = 0; i < linearParams.colors.length; i++) {
|
||||
grd.addColorStop(i / (linearParams.colors.length - 1), linearParams.colors[i]);
|
||||
}
|
||||
}
|
||||
ctx.setFillStyle(grd);
|
||||
ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
},
|
||||
}
|
||||
|
||||
const linearParams = {
|
||||
coordinate: [],
|
||||
colors: [],
|
||||
status: [],
|
||||
function analizeGrad(string) {
|
||||
const colorPercents = string.substring(0, string.length - 1).split("%,");
|
||||
const colors = [];
|
||||
const percents = [];
|
||||
for (let colorPercent of colorPercents) {
|
||||
colors.push(colorPercent.substring(0, colorPercent.lastIndexOf(" ")).trim());
|
||||
percents.push(colorPercent.substring(colorPercent.lastIndexOf(" "), colorPercent.length) / 100);
|
||||
}
|
||||
return {colors: colors, percents: percents};
|
||||
}
|
||||
|
||||
const radialParams = {
|
||||
coordinate: [],
|
||||
colors: [],
|
||||
status: [],
|
||||
function radialEffect(width, height, bg, ctx) {
|
||||
const colorPer = analizeGrad(bg.match(/radial-gradient\((.+)\)/)[1]);
|
||||
const grd = ctx.createCircularGradient(0, 0, width < height ? height / 2 : width / 2);
|
||||
for (let i = 0; i < colorPer.colors.length; i++) {
|
||||
grd.addColorStop(colorPer.percents[i], colorPer.colors[i]);
|
||||
}
|
||||
ctx.setFillStyle(grd);
|
||||
ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
}
|
||||
|
||||
function analizeLinear(bg, width, height) {
|
||||
const direction = bg.match(/([-]?\d{1,3})deg/);
|
||||
const dir = direction && direction[1] ? parseFloat(direction[1]) : 0;
|
||||
let coordinate;
|
||||
switch (dir) {
|
||||
case 0: console.log('case 0:'); coordinate = [0, -height / 2, 0, height / 2]; break;
|
||||
case 90: console.log('case 90:'); coordinate = [width / 2, 0, -width / 2, 0]; break;
|
||||
case -90: console.log('case -90:'); coordinate = [-width / 2, 0, width / 2, 0]; break;
|
||||
case 180: console.log('case 180:'); coordinate = [0, height / 2, 0, -height / 2]; break;
|
||||
case -180: console.log('case -180:'); coordinate = [0, -height / 2, 0, height / 2]; break;
|
||||
default:
|
||||
let x1 = 0;
|
||||
let y1 = 0;
|
||||
let x2 = 0;
|
||||
let y2 = 0;
|
||||
if (direction[1] > 0 && direction[1] < 90) {
|
||||
x1 = (width / 2) - ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
} else if (direction[1] > -180 && direction[1] < -90) {
|
||||
x1 = -(width / 2) + ((width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
} else if (direction[1] > 90 && direction[1] < 180) {
|
||||
x1 = (width / 2) + (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
} else {
|
||||
x1 = -(width / 2) - (-(width / 2) * Math.tan((90 - direction[1]) * Math.PI * 2 / 360) - height / 2) * Math.sin(2 * (90 - direction[1]) * Math.PI * 2 / 360) / 2;
|
||||
y2 = Math.tan((90 - direction[1]) * Math.PI * 2 / 360) * x1;
|
||||
x2 = -x1;
|
||||
y1 = -y2;
|
||||
}
|
||||
coordinate = [x1, y1, x2, y2];
|
||||
break;
|
||||
}
|
||||
return coordinate;
|
||||
}
|
||||
|
||||
function linearEffect(width, height, bg, ctx) {
|
||||
const param = analizeLinear(bg, width, height);
|
||||
const grd = ctx.createLinearGradient(param[0], param[1], param[2], param[3]);
|
||||
const content = bg.match(/linear-gradient\((.+)\)/)[1];
|
||||
const colorPer = analizeGrad(content.substring(content.indexOf(',') + 1));
|
||||
for (let i = 0; i < colorPer.colors.length; i++) {
|
||||
grd.addColorStop(colorPer.percents[i], colorPer.colors[i]);
|
||||
}
|
||||
ctx.setFillStyle(grd);
|
||||
ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
}
|
||||
|
||||
module.exports = { api }
|
||||
|
||||
16
lib/pen.js
16
lib/pen.js
@ -39,14 +39,8 @@ export default class Painter {
|
||||
// 背景填充颜色
|
||||
this.ctx.setFillStyle(bg);
|
||||
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
} else if (bg.startsWith('linear')) {
|
||||
const param = GD.api.analizeLinear(bg, width, height);
|
||||
const grd = this.ctx.createLinearGradient(param[0], param[1], param[2], param[3]);
|
||||
GD.api.linearEffect(width, height, grd, this.ctx);
|
||||
} else if (bg.startsWith('radial')) {
|
||||
const param = GD.api.analizeRadial(bg, width, height);
|
||||
const grd = this.ctx.createCircularGradient(param[0], param[1], param[2]);
|
||||
GD.api.radialEffect(width, height, grd, this.ctx);
|
||||
} else if (GD.api.isGradient(bg)) {
|
||||
GD.api.doGradient(bg, width, height, this.ctx);
|
||||
} else {
|
||||
// 背景填充图片
|
||||
this.ctx.drawImage(bg, -(width / 2), -(height / 2), width, height);
|
||||
@ -355,7 +349,11 @@ export default class Painter {
|
||||
width,
|
||||
height,
|
||||
} = this._preProcess(view);
|
||||
this.ctx.setFillStyle(view.css.color);
|
||||
if (GD.api.isGradient(view.css.color)) {
|
||||
GD.api.doGradient(view.css.color, width, height, this.ctx);
|
||||
} else {
|
||||
this.ctx.setFillStyle(view.css.color);
|
||||
}
|
||||
this.ctx.fillRect(-(width / 2), -(height / 2), width, height);
|
||||
this.ctx.restore();
|
||||
this._doBorder(view, width, height);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user