Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
karas - npm Package Compare versions
Comparing version 0.0.7 to 0.0.8
| { | ||
| "name": "karas", | ||
| "version": "0.0.7", | ||
| "version": "0.0.8", | ||
| "description": "鸦", | ||
@@ -15,3 +15,3 @@ "maintainers": [ | ||
| "dist": "rollup -c rollup.config.dist.js", | ||
| "test": "make test" | ||
| "test": "gulp build-test && nightwatch --filter test.js" | ||
| }, | ||
@@ -18,0 +18,0 @@ "repository": { |
@@ -120,3 +120,3 @@ import util from './util'; | ||
| diffBb(elem.firstChild, ovd.bb, nvd.bb); | ||
| replaceWith(elem.lastChild, nvd.content); | ||
| replaceWith(elem.lastChild, nvd.children); | ||
| } | ||
@@ -157,4 +157,4 @@ | ||
| diffBb(elem.firstChild, ovd.bb, nvd.bb); | ||
| let ol = ovd.content.length; | ||
| let nl = nvd.content.length; | ||
| let ol = ovd.children.length; | ||
| let nl = nvd.children.length; | ||
| let i = 0; | ||
@@ -164,3 +164,3 @@ let lastChild = elem.lastChild; | ||
| for(; i < Math.min(ol, nl); i++) { | ||
| diffItem(lastChild, i, ovd.content[i], nvd.content[i]); | ||
| diffItem(lastChild, i, ovd.children[i], nvd.children[i]); | ||
| } | ||
@@ -174,3 +174,3 @@ if(i < ol) { | ||
| for(; i < nl; i++) { | ||
| insertAt(lastChild, cns, i, util.joinVd(nvd.content[i])); | ||
| insertAt(lastChild, cns, i, util.joinVd(nvd.children[i])); | ||
| } | ||
@@ -177,0 +177,0 @@ } |
| import Geom from './Geom'; | ||
| import mode from '../mode'; | ||
| import gradient from '../style/gradient'; | ||
@@ -19,31 +20,28 @@ class Circle extends Geom { | ||
| super.render(renderMode); | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style, ctx, r, virtualDom } = this; | ||
| let { width, height, ctx, r } = this; | ||
| let { | ||
| display, | ||
| borderTopWidth, | ||
| borderLeftWidth, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| fill, | ||
| } = style; | ||
| cx, cy, display, fill, | ||
| stroke, strokeWidth, strokeDasharray, | ||
| slg, flg, frg } = this.getPreRender(); | ||
| if(display === 'none') { | ||
| return; | ||
| } | ||
| let originX = x + borderLeftWidth.value + mlw + plw; | ||
| let originY = y + borderTopWidth.value + mtw + ptw; | ||
| originX += width * 0.5; | ||
| originY += height * 0.5; | ||
| r *= Math.min(width, height) * 0.5; | ||
| if(renderMode === mode.CANVAS) { | ||
| ctx.strokeStyle = stroke; | ||
| ctx.strokeStyle = slg ? this.getCanvasLg(slg) : stroke; | ||
| ctx.lineWidth = strokeWidth; | ||
| ctx.fillStyle = fill; | ||
| if(flg) { | ||
| ctx.fillStyle = this.getCanvasLg(flg); | ||
| } | ||
| else if(frg) { | ||
| ctx.fillStyle = this.getCanvasRg(frg); | ||
| } | ||
| else { | ||
| ctx.fillStyle = fill; | ||
| } | ||
| ctx.setLineDash(strokeDasharray); | ||
| ctx.beginPath(); | ||
| ctx.arc(originX, originY, r, 0, 2 * Math.PI); | ||
| if(fill !== 'transparent') { | ||
| ctx.fill(); | ||
| } | ||
| if(strokeWidth && stroke !== 'transparent') { | ||
| ctx.arc(cx, cy, r, 0, 2 * Math.PI); | ||
| ctx.fill(); | ||
| if(strokeWidth > 0) { | ||
| ctx.stroke(); | ||
@@ -54,15 +52,23 @@ } | ||
| else if(renderMode === mode.SVG) { | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'circle', | ||
| props: [ | ||
| ['cx', originX], | ||
| ['cy', originY], | ||
| ['r', r], | ||
| ['fill', fill], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| if(slg) { | ||
| let uuid = this.getSvgLg(slg); | ||
| stroke = `url(#${uuid})`; | ||
| } | ||
| if(flg) { | ||
| let uuid = this.getSvgLg(flg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| else if(frg) { | ||
| let uuid = this.getSvgRg(frg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| this.addGeom('circle', [ | ||
| ['cx', cx], | ||
| ['cy', cy], | ||
| ['r', r], | ||
| ['fill', fill], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ]); | ||
| } | ||
@@ -69,0 +75,0 @@ } |
| import Geom from './Geom'; | ||
| import mode from '../mode'; | ||
| import gradient from "../style/gradient"; | ||
@@ -8,14 +9,14 @@ class Ellipse extends Geom { | ||
| // 半径0~1，默认1 | ||
| this.__rx = 1; | ||
| this.__xr = 1; | ||
| if(this.props.rx) { | ||
| this.__rx = parseFloat(this.props.rx); | ||
| if(isNaN(this.rx)) { | ||
| this.__rx = 1; | ||
| this.__xr = parseFloat(this.props.rx); | ||
| if(isNaN(this.xr)) { | ||
| this.__xr = 1; | ||
| } | ||
| } | ||
| this.__ry = 1; | ||
| this.__yr = 1; | ||
| if(this.props.ry) { | ||
| this.__ry = parseFloat(this.props.ry); | ||
| if(isNaN(this.rx)) { | ||
| this.__ry = 1; | ||
| this.__yr = parseFloat(this.props.ry); | ||
| if(isNaN(this.yr)) { | ||
| this.__yr = 1; | ||
| } | ||
@@ -27,31 +28,29 @@ } | ||
| super.render(renderMode); | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style, ctx, rx, ry, virtualDom } = this; | ||
| let { width, height, ctx, xr, yr } = this; | ||
| let { | ||
| display, | ||
| borderTopWidth, | ||
| borderLeftWidth, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| fill, | ||
| } = style; | ||
| cx, cy, display, fill, | ||
| stroke, strokeWidth, strokeDasharray, | ||
| slg, flg, frg } = this.getPreRender(); | ||
| if(display === 'none') { | ||
| return; | ||
| } | ||
| let originX = x + borderLeftWidth.value + mlw + plw; | ||
| let originY = y + borderTopWidth.value + mtw + ptw; | ||
| originX += width * 0.5; | ||
| originY += height * 0.5; | ||
| rx *= width * 0.5; | ||
| ry *= height * 0.5; | ||
| xr *= width * 0.5; | ||
| yr *= height * 0.5; | ||
| if(renderMode === mode.CANVAS) { | ||
| ctx.strokeStyle = stroke; | ||
| ctx.strokeStyle = slg ? this.getCanvasLg(slg) : stroke; | ||
| ctx.lineWidth = strokeWidth; | ||
| ctx.fillStyle = fill; | ||
| if(flg) { | ||
| ctx.fillStyle = this.getCanvasLg(flg); | ||
| } | ||
| else if(frg) { | ||
| ctx.fillStyle = this.getCanvasRg(frg); | ||
| } | ||
| else { | ||
| ctx.fillStyle = fill; | ||
| } | ||
| ctx.setLineDash(strokeDasharray); | ||
| ctx.beginPath(); | ||
| ctx.moveTo(originX, originY); | ||
| ctx.ellipse && ctx.ellipse(originX, originY, rx, ry, 0, 0, 2 * Math.PI); | ||
| ctx.ellipse && ctx.ellipse(cx, cy, xr, yr, 0, 0, 2 * Math.PI); | ||
| ctx.fill(); | ||
| if(strokeWidth && stroke !== 'transparent') { | ||
| if(strokeWidth > 0) { | ||
| ctx.stroke(); | ||
@@ -62,24 +61,32 @@ } | ||
| else if(renderMode === mode.SVG) { | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'ellipse', | ||
| props: [ | ||
| ['cx', originX], | ||
| ['cy', originY], | ||
| ['rx', rx], | ||
| ['ry', ry], | ||
| ['fill', fill], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| if(slg) { | ||
| let uuid = this.getSvgLg(slg); | ||
| stroke = `url(#${uuid})`; | ||
| } | ||
| if(flg) { | ||
| let uuid = this.getSvgLg(flg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| else if(frg) { | ||
| let uuid = this.getSvgRg(frg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| this.addGeom('ellipse', [ | ||
| ['cx', cx], | ||
| ['cy', cy], | ||
| ['rx', xr], | ||
| ['ry', yr], | ||
| ['fill', fill], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ]); | ||
| } | ||
| } | ||
| get rx() { | ||
| return this.__rx; | ||
| get xr() { | ||
| return this.__xr; | ||
| } | ||
| get ry() { | ||
| return this.__ry; | ||
| get yr() { | ||
| return this.__yr; | ||
| } | ||
@@ -86,0 +93,0 @@ } |
@@ -5,4 +5,6 @@ import Xom from '../node/Xom'; | ||
| import mode from '../mode'; | ||
| import util from '../util'; | ||
| import gradient from '../style/gradient'; | ||
| const IMPLEMENT = {}; | ||
| const REGISTER = {}; | ||
@@ -66,4 +68,16 @@ class Geom extends Xom { | ||
| let { fixedHeight, w, h } = this.__preLayout(data); | ||
| let { | ||
| marginLeft, | ||
| marginRight, | ||
| width, | ||
| } = this.style; | ||
| this.__width = w; | ||
| this.__height = fixedHeight ? h : 0; | ||
| // 处理margin:xx auto居中对齐 | ||
| if(marginLeft.unit === unit.AUTO && marginRight.unit === unit.AUTO && width.unit !== unit.AUTO) { | ||
| let ow = this.outerWidth; | ||
| if(ow < data.w) { | ||
| this.__offsetX((data.w - ow) * 0.5); | ||
| } | ||
| } | ||
| } | ||
@@ -87,2 +101,56 @@ | ||
| getPreRender() { | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style } = this; | ||
| let { | ||
| borderTopWidth, | ||
| borderLeftWidth, | ||
| display, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| fill, | ||
| } = style; | ||
| let originX = x + borderLeftWidth.value + mlw + plw; | ||
| let originY = y + borderTopWidth.value + mtw + ptw; | ||
| let cx = originX + width * 0.5; | ||
| let cy = originY + height * 0.5; | ||
| let slg; | ||
| if(strokeWidth > 0 && stroke.indexOf('linear-gradient') > -1) { | ||
| let go = gradient.parseGradient(stroke); | ||
| if(go) { | ||
| slg = gradient.getLinear(go.v, cx, cy, width, height); | ||
| } | ||
| } | ||
| let flg; | ||
| let frg; | ||
| if(fill.indexOf('linear-gradient') > -1) { | ||
| let go = gradient.parseGradient(fill); | ||
| if(go) { | ||
| flg = gradient.getLinear(go.v, cx, cy, width, height); | ||
| } | ||
| } | ||
| else if(fill.indexOf('radial-gradient') > -1) { | ||
| let go = gradient.parseGradient(fill); | ||
| if(go) { | ||
| frg = gradient.getRadial(go.v, cx, cy, originX, originY, originY + width, originY + height); | ||
| } | ||
| } | ||
| return { | ||
| x, | ||
| y, | ||
| originX, | ||
| originY, | ||
| cx, | ||
| cy, | ||
| display, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| fill, | ||
| slg, | ||
| flg, | ||
| frg, | ||
| }; | ||
| } | ||
| render(renderMode) { | ||
@@ -98,2 +166,11 @@ super.render(renderMode); | ||
| addGeom(tagName, props) { | ||
| props = util.hash2arr(props); | ||
| this.virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName, | ||
| props, | ||
| }); | ||
| } | ||
| get tagName() { | ||
@@ -106,16 +183,19 @@ return this.__tagName; | ||
| static getImplement(name) { | ||
| if(!IMPLEMENT.hasOwnProperty(name)) { | ||
| static getRegister(name) { | ||
| if(!REGISTER.hasOwnProperty(name)) { | ||
| throw new Error(`Geom has not register: ${name}`); | ||
| } | ||
| return IMPLEMENT[name]; | ||
| return REGISTER[name]; | ||
| } | ||
| static register(name, implement) { | ||
| if(IMPLEMENT.hasOwnProperty(name)) { | ||
| static register(name, obj) { | ||
| if(Geom.hasRegister(name)) { | ||
| throw new Error(`Geom has already register: ${name}`); | ||
| } | ||
| IMPLEMENT[name] = implement; | ||
| REGISTER[name] = obj; | ||
| } | ||
| static hasRegister(name) { | ||
| return REGISTER.hasOwnProperty(name); | ||
| } | ||
| } | ||
| export default Geom; |
| import Geom from './Geom'; | ||
| import mode from '../mode'; | ||
| import gradient from "../style/gradient"; | ||
@@ -26,22 +27,13 @@ class Grid extends Geom { | ||
| super.render(renderMode); | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style, ctx, nx, ny, virtualDom } = this; | ||
| if(width <= 0 || height <= 0) { | ||
| let { width, height, ctx, nx, ny } = this; | ||
| if(nx < 2 && ny < 2) { | ||
| return; | ||
| } | ||
| if(nx < 3 && ny < 3) { | ||
| return; | ||
| } | ||
| let { | ||
| display, | ||
| borderTopWidth, | ||
| borderLeftWidth, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| } = style; | ||
| originX, originY, display, | ||
| stroke, strokeWidth, strokeDasharray, | ||
| slg } = this.getPreRender(); | ||
| if(display === 'none') { | ||
| return; | ||
| } | ||
| let originX = x + borderLeftWidth.value + mlw + plw; | ||
| let originY = y + borderTopWidth.value + mtw + ptw; | ||
| let endX = originX + width; | ||
@@ -51,16 +43,12 @@ let endY = originY + height; | ||
| let ly = []; | ||
| if(nx >= 3) { | ||
| let per = width / (nx - 1); | ||
| for(let i = 0; i < nx; i++) { | ||
| ly.push(originX + i * per); | ||
| } | ||
| let pw = width / (nx - 1); | ||
| for(let i = 0; i < nx; i++) { | ||
| ly.push(originX + i * pw); | ||
| } | ||
| if(ny >= 3) { | ||
| let per = height / (ny - 1); | ||
| for(let i = 0; i < ny; i++) { | ||
| lx.push(originY + i * per); | ||
| } | ||
| let ph = height / (ny - 1); | ||
| for(let i = 0; i < ny; i++) { | ||
| lx.push(originY + i * ph); | ||
| } | ||
| if(renderMode === mode.CANVAS) { | ||
| ctx.strokeStyle = stroke; | ||
| ctx.strokeStyle = slg ? this.getCanvasLg(slg) : stroke; | ||
| ctx.lineWidth = strokeWidth; | ||
@@ -77,37 +65,31 @@ ctx.setLineDash(strokeDasharray); | ||
| }); | ||
| if(strokeWidth && stroke !== 'transparent') { | ||
| ctx.stroke(); | ||
| } | ||
| ctx.stroke(); | ||
| ctx.closePath(); | ||
| } | ||
| else if(renderMode === mode.SVG) { | ||
| if(slg) { | ||
| let uuid = this.getSvgLg(slg); | ||
| stroke = `url(#${uuid})`; | ||
| } | ||
| lx.forEach(item => { | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'line', | ||
| props: [ | ||
| ['x1', originX], | ||
| ['y1', item], | ||
| ['x2', endX], | ||
| ['y2', item], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| this.addGeom('line', [ | ||
| ['x1', originX], | ||
| ['y1', item], | ||
| ['x2', endX], | ||
| ['y2', item], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ]); | ||
| }); | ||
| ly.forEach(item => { | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'line', | ||
| props: [ | ||
| ['x1', item], | ||
| ['y1', originY], | ||
| ['x2', item], | ||
| ['y2', endY], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| this.addGeom('line', [ | ||
| ['x1', item], | ||
| ['y1', originY], | ||
| ['x2', item], | ||
| ['y2', endY], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ]); | ||
| }); | ||
@@ -123,7 +105,4 @@ } | ||
| } | ||
| get dash() { | ||
| return this.__dash; | ||
| } | ||
| } | ||
| export default Grid; |
| import Geom from './Geom'; | ||
| import mode from '../mode'; | ||
| import gradient from '../style/gradient'; | ||
@@ -7,8 +8,8 @@ class Line extends Geom { | ||
| super(tagName, props); | ||
| // start和end表明线段的首尾坐标，control表明控制点坐标 | ||
| this.__start = []; | ||
| this.__end = []; | ||
| // begin和end表明线段的首尾坐标，control表明控制点坐标 | ||
| this.__begin = [0, 0]; | ||
| this.__end = [1, 1]; | ||
| this.__control = []; | ||
| if(Array.isArray(this.props.start)) { | ||
| this.__start = this.props.start; | ||
| if(Array.isArray(this.props.begin)) { | ||
| this.__begin = this.props.begin; | ||
| } | ||
@@ -25,26 +26,19 @@ if(Array.isArray(this.props.end)) { | ||
| super.render(renderMode); | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style, ctx, start, end, control, virtualDom } = this; | ||
| if(start.length < 2 || end.length < 2) { | ||
| let { width, height, ctx, begin, end, control } = this; | ||
| if(begin.length < 2 || end.length < 2) { | ||
| return; | ||
| } | ||
| let { | ||
| display, | ||
| borderTopWidth, | ||
| borderRightWidth, | ||
| borderBottomWidth, | ||
| borderLeftWidth, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| } = style; | ||
| originX, originY, display, | ||
| stroke, strokeWidth, strokeDasharray, | ||
| slg } = this.getPreRender(); | ||
| if(display === 'none') { | ||
| return; | ||
| } | ||
| let originX = x + borderLeftWidth.value + mlw + plw; | ||
| let originY = y + borderTopWidth.value + mtw + ptw; | ||
| let x1 = originX + start[0] * width; | ||
| let y1 = originY + start[1] * height; | ||
| let x1 = originX + begin[0] * width; | ||
| let y1 = originY + begin[1] * height; | ||
| let x2 = originX + end[0] * width; | ||
| let y2 = originY + end[1] * height; | ||
| let curve = 0; | ||
| // 控制点，曲线 | ||
| let cx1, cy1, cx2, cy2; | ||
@@ -62,3 +56,3 @@ if(Array.isArray(control[0])) { | ||
| if(renderMode === mode.CANVAS) { | ||
| ctx.strokeStyle = stroke; | ||
| ctx.strokeStyle = slg ? this.getCanvasLg(slg) : stroke; | ||
| ctx.lineWidth = strokeWidth; | ||
@@ -77,52 +71,34 @@ ctx.setLineDash(strokeDasharray); | ||
| } | ||
| ctx.stroke(); | ||
| if(strokeWidth > 0) { | ||
| ctx.stroke(); | ||
| } | ||
| ctx.closePath(); | ||
| } | ||
| else if(renderMode === mode.SVG) { | ||
| if(slg) { | ||
| let uuid = this.getSvgLg(slg); | ||
| stroke = `url(#${uuid})`; | ||
| } | ||
| let d; | ||
| if(curve === 2) { | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'path', | ||
| props: [ | ||
| ['d', `M${x1} ${y1} C${cx1} ${cy1} ${cx2} ${cy2} ${x2} ${y2}`], | ||
| ['fill', 'none'], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| d = `M${x1} ${y1} C${cx1} ${cy1} ${cx2} ${cy2} ${x2} ${y2}`; | ||
| } | ||
| else if(curve === 1) { | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'path', | ||
| props: [ | ||
| ['d', `M${x1} ${y1} Q${cx1} ${cy1} ${x2} ${y2}`], | ||
| ['fill', 'none'], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| d = `M${x1} ${y1} Q${cx1} ${cy1} ${x2} ${y2}`; | ||
| } | ||
| else { | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'line', | ||
| props: [ | ||
| ['x1', x1], | ||
| ['y1', y1], | ||
| ['x2', x2], | ||
| ['y2', y2], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| d = `M${x1} ${y1} L${x2} ${y2}`; | ||
| } | ||
| this.addGeom('path', [ | ||
| ['d', d], | ||
| ['fill', 'none'], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ]); | ||
| } | ||
| } | ||
| get start() { | ||
| return this.__start; | ||
| get begin() { | ||
| return this.__begin; | ||
| } | ||
@@ -129,0 +105,0 @@ get end() { |
| import Geom from './Geom'; | ||
| import mode from '../mode'; | ||
| import gradient from '../style/gradient'; | ||
@@ -16,3 +17,3 @@ class Polygon extends Geom { | ||
| super.render(renderMode); | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style, ctx, points, virtualDom } = this; | ||
| let { width, height, ctx, points } = this; | ||
| if(points.length < 3) { | ||
@@ -27,15 +28,8 @@ return; | ||
| let { | ||
| display, | ||
| borderTopWidth, | ||
| borderLeftWidth, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| fill, | ||
| } = style; | ||
| originX, originY, display, fill, | ||
| stroke, strokeWidth, strokeDasharray, | ||
| slg, flg, frg } = this.getPreRender(); | ||
| if(display === 'none') { | ||
| return; | ||
| } | ||
| let originX = x + borderLeftWidth.value + mlw + plw; | ||
| let originY = y + borderTopWidth.value + mtw + ptw; | ||
| points.forEach(item => { | ||
@@ -46,8 +40,16 @@ item[0] = originX + item[0] * width; | ||
| if(renderMode === mode.CANVAS) { | ||
| ctx.strokeStyle = stroke; | ||
| ctx.strokeStyle = slg ? this.getCanvasLg(slg) : stroke; | ||
| ctx.lineWidth = strokeWidth; | ||
| ctx.fillStyle = fill; | ||
| if(flg) { | ||
| ctx.fillStyle = this.getCanvasLg(flg); | ||
| } | ||
| else if(frg) { | ||
| ctx.fillStyle = this.getCanvasRg(frg); | ||
| } | ||
| else { | ||
| ctx.fillStyle = fill; | ||
| } | ||
| ctx.setLineDash(strokeDasharray); | ||
| ctx.beginPath(); | ||
| ctx.moveTo(points[0][0], originY + points[0][1]); | ||
| ctx.moveTo(points[0][0], points[0][1]); | ||
| for(let i = 1, len = points.length; i < len; i++) { | ||
@@ -57,4 +59,5 @@ let point = points[i]; | ||
| } | ||
| ctx.lineTo(points[0][0], points[0][1]); | ||
| ctx.fill(); | ||
| if(strokeWidth && stroke !== 'transparent') { | ||
| if(strokeWidth > 0) { | ||
| ctx.stroke(); | ||
@@ -65,18 +68,26 @@ } | ||
| else if(renderMode === mode.SVG) { | ||
| let points = ''; | ||
| let pts = ''; | ||
| for(let i = 0, len = points.length; i < len; i++) { | ||
| let point = points[i]; | ||
| points += `${point[0]},${point[1]} `; | ||
| pts += `${point[0]},${point[1]} `; | ||
| } | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'polygon', | ||
| props: [ | ||
| ['points', points], | ||
| ['fill', fill], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| if(slg) { | ||
| let uuid = this.getSvgLg(slg); | ||
| stroke = `url(#${uuid})`; | ||
| } | ||
| if(flg) { | ||
| let uuid = this.getSvgLg(flg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| else if(frg) { | ||
| let uuid = this.getSvgRg(frg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| this.addGeom('polygon', [ | ||
| ['points', pts], | ||
| ['fill', fill], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ]); | ||
| } | ||
@@ -83,0 +94,0 @@ } |
| import Geom from './Geom'; | ||
| import mode from '../mode'; | ||
| import gradient from "../style/gradient"; | ||
@@ -17,3 +18,3 @@ class Polyline extends Geom { | ||
| else { | ||
| this.__origin = 'BOTTOM_LEFT'; | ||
| this.__origin = 'TOP_LEFT'; | ||
| } | ||
@@ -24,3 +25,3 @@ } | ||
| super.render(renderMode); | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style, ctx, points, origin, virtualDom } = this; | ||
| let { width, height, ctx, points, origin } = this; | ||
| if(points.length < 2) { | ||
@@ -35,14 +36,8 @@ return; | ||
| let { | ||
| display, | ||
| borderTopWidth, | ||
| borderLeftWidth, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| } = style; | ||
| originX, originY, display, | ||
| stroke, strokeWidth, strokeDasharray, | ||
| slg } = this.getPreRender(); | ||
| if(display === 'none') { | ||
| return; | ||
| } | ||
| let originX = x + borderLeftWidth.value + mlw + plw; | ||
| let originY = y + borderTopWidth.value + mtw + ptw; | ||
| let pts = this.__pts = []; | ||
@@ -82,7 +77,7 @@ if(origin === 'TOP_LEFT') { | ||
| if(renderMode === mode.CANVAS) { | ||
| ctx.strokeStyle = stroke; | ||
| ctx.strokeStyle = slg ? this.getCanvasLg(slg) : stroke; | ||
| ctx.lineWidth = strokeWidth; | ||
| ctx.setLineDash(strokeDasharray); | ||
| ctx.beginPath(); | ||
| ctx.moveTo(pts[0][0], originY + pts[0][1]); | ||
| ctx.moveTo(pts[0][0], pts[0][1]); | ||
| for(let i = 1, len = pts.length; i < len; i++) { | ||
@@ -92,3 +87,3 @@ let point = pts[i]; | ||
| } | ||
| if(strokeWidth && stroke !== 'transparent') { | ||
| if(strokeWidth > 0) { | ||
| ctx.stroke(); | ||
@@ -104,37 +99,14 @@ } | ||
| } | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'polyline', | ||
| props: [ | ||
| ['points', points], | ||
| ['fill', 'none'], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| } | ||
| } | ||
| getPointsByX(x) { | ||
| let min = Infinity; | ||
| let len = this.__pts.length; | ||
| let res = []; | ||
| for(let i = 0; i < len; i++) { | ||
| let diff = Math.abs(this.__pts[i][0] - x); | ||
| if(diff < min) { | ||
| min = diff; | ||
| if(slg) { | ||
| let uuid = this.getSvgLg(slg); | ||
| stroke = `url(#${uuid})`; | ||
| } | ||
| this.addGeom('polyline', [ | ||
| ['points', points], | ||
| ['fill', 'none'], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ]); | ||
| } | ||
| for(let i = 0; i < len; i++) { | ||
| let diff = Math.abs(this.__pts[i][0] - x); | ||
| if(diff === min) { | ||
| res.push({ | ||
| index: i, | ||
| x: this.__pts[i][0], | ||
| y: this.__pts[i][1], | ||
| }); | ||
| } | ||
| } | ||
| return res; | ||
| } | ||
@@ -141,0 +113,0 @@ |
| import Geom from './Geom'; | ||
| import mode from '../mode'; | ||
| import gradient from '../style/gradient'; | ||
@@ -11,21 +12,22 @@ class Rect extends Geom { | ||
| super.render(renderMode); | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style, ctx, virtualDom } = this; | ||
| let { rx: x, ry: y, width, height, ctx } = this; | ||
| let { | ||
| display, | ||
| borderTopWidth, | ||
| borderLeftWidth, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| fill, | ||
| } = style; | ||
| originX, originY, display, fill, | ||
| stroke, strokeWidth, strokeDasharray, | ||
| slg, flg, frg } = this.getPreRender(); | ||
| if(display === 'none') { | ||
| return; | ||
| } | ||
| let originX = x + borderLeftWidth.value + mlw + plw; | ||
| let originY = y + borderTopWidth.value + mtw + ptw; | ||
| if(renderMode === mode.CANVAS) { | ||
| ctx.strokeStyle = stroke; | ||
| ctx.strokeStyle = slg ? this.getCanvasLg(slg) : stroke; | ||
| ctx.lineWidth = strokeWidth; | ||
| ctx.fillStyle = fill; | ||
| if(flg) { | ||
| ctx.fillStyle = this.getCanvasLg(flg); | ||
| } | ||
| else if(frg) { | ||
| ctx.fillStyle = this.getCanvasRg(frg); | ||
| } | ||
| else { | ||
| ctx.fillStyle = fill; | ||
| } | ||
| ctx.setLineDash(strokeDasharray); | ||
@@ -37,4 +39,5 @@ ctx.beginPath(); | ||
| ctx.lineTo(originX, originY + height); | ||
| ctx.lineTo(originX, originY); | ||
| ctx.fill(); | ||
| if(strokeWidth && stroke !== 'transparent') { | ||
| if(strokeWidth > 0) { | ||
| ctx.stroke(); | ||
@@ -45,16 +48,24 @@ } | ||
| else if(renderMode === mode.SVG) { | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'rect', | ||
| props: [ | ||
| ['x', x], | ||
| ['y', y], | ||
| ['width', width], | ||
| ['height', height], | ||
| ['fill', fill], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| if(slg) { | ||
| let uuid = this.getSvgLg(slg); | ||
| stroke = `url(#${uuid})`; | ||
| } | ||
| if(flg) { | ||
| let uuid = this.getSvgLg(flg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| else if(frg) { | ||
| let uuid = this.getSvgRg(frg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| this.addGeom('rect', [ | ||
| ['x', x], | ||
| ['y', y], | ||
| ['width', width], | ||
| ['height', height], | ||
| ['fill', fill], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ]); | ||
| } | ||
@@ -61,0 +72,0 @@ } |
| import Geom from './Geom'; | ||
| import mode from '../mode'; | ||
| import gradient from '../style/gradient'; | ||
| const OFFSET = Math.PI * 0.5; | ||
| function getCoordByDegree(x, y, r, d) { | ||
| while(d > 360) { | ||
| d -= 360; | ||
| } | ||
| while(d < 0) { | ||
| d += 360; | ||
| } | ||
| function getCoordsByDegree(x, y, r, d) { | ||
| d = d % 360; | ||
| if(d >= 0 && d < 90) { | ||
@@ -43,8 +39,8 @@ return [ | ||
| // 角度 | ||
| this.__start = 0; | ||
| this.__begin = 0; | ||
| this.__end = 0; | ||
| if(this.props.start) { | ||
| this.__start = parseFloat(this.props.start); | ||
| if(isNaN(this.start)) { | ||
| this.__start = 0; | ||
| if(this.props.begin) { | ||
| this.__begin = parseFloat(this.props.begin); | ||
| if(isNaN(this.begin)) { | ||
| this.__begin = 0; | ||
| } | ||
@@ -66,2 +62,7 @@ } | ||
| } | ||
| // 扇形两侧是否有边 | ||
| this.__edge = false; | ||
| if(this.props.edge !== undefined) { | ||
| this.__edge = !!this.props.edge; | ||
| } | ||
| } | ||
@@ -71,47 +72,66 @@ | ||
| super.render(renderMode); | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style, ctx, start, end, r, virtualDom } = this; | ||
| if(start === end) { | ||
| let { rx: x, ry: y, width, height, mlw, mtw, plw, ptw, style, ctx, begin, end, r, virtualDom } = this; | ||
| if(begin === end) { | ||
| return; | ||
| } | ||
| let { | ||
| display, | ||
| borderTopWidth, | ||
| borderLeftWidth, | ||
| stroke, | ||
| strokeWidth, | ||
| strokeDasharray, | ||
| fill, | ||
| } = style; | ||
| cx, cy, display, fill, | ||
| stroke, strokeWidth, strokeDasharray, | ||
| slg, flg, frg } = this.getPreRender(); | ||
| if(display === 'none') { | ||
| return; | ||
| } | ||
| let originX = x + borderLeftWidth.value + mlw + plw; | ||
| let originY = y + borderTopWidth.value + mtw + ptw; | ||
| originX += width * 0.5; | ||
| originY += height * 0.5; | ||
| r *= Math.min(width, height) * 0.5; | ||
| let x1, y1, x2, y2; | ||
| [ x1, y1 ] = getCoordsByDegree(cx, cy, r, begin); | ||
| [ x2, y2 ] = getCoordsByDegree(cx, cy, r, end); | ||
| if(renderMode === mode.CANVAS) { | ||
| ctx.strokeStyle = stroke; | ||
| ctx.strokeStyle = slg ? this.getCanvasLg(slg) : stroke; | ||
| ctx.lineWidth = strokeWidth; | ||
| ctx.fillStyle = fill; | ||
| if(flg) { | ||
| ctx.fillStyle = this.getCanvasLg(flg); | ||
| } | ||
| else if(frg) { | ||
| ctx.fillStyle = this.getCanvasRg(frg); | ||
| } | ||
| else { | ||
| ctx.fillStyle = fill; | ||
| } | ||
| ctx.setLineDash(strokeDasharray); | ||
| ctx.beginPath(); | ||
| ctx.moveTo(originX, originY); | ||
| ctx.arc(originX, originY, r, start * Math.PI / 180 - OFFSET, end * Math.PI / 180 - OFFSET); | ||
| ctx.arc(cx, cy, r, begin * Math.PI / 180 - OFFSET, end * Math.PI / 180 - OFFSET); | ||
| if(this.edge) { | ||
| ctx.lineTo(cx, cy); | ||
| ctx.lineTo(x1, y1); | ||
| if(strokeWidth > 0) { | ||
| ctx.stroke(); | ||
| } | ||
| } | ||
| else { | ||
| if(strokeWidth > 0) { | ||
| ctx.stroke(); | ||
| } | ||
| ctx.lineTo(cx, cy); | ||
| ctx.lineTo(x1, y1); | ||
| } | ||
| ctx.fill(); | ||
| if(strokeWidth && stroke !== 'transparent') { | ||
| ctx.stroke(); | ||
| } | ||
| ctx.closePath(); | ||
| } | ||
| else if(renderMode === mode.SVG) { | ||
| let x1, y1, x2, y2; | ||
| [ x1, y1 ] = getCoordByDegree(originX, originY, r, start); | ||
| [ x2, y2 ] = getCoordByDegree(originX, originY, r, end); | ||
| let large = (end - start) > 180 ? 1 : 0; | ||
| virtualDom.children.push({ | ||
| type: 'item', | ||
| tagName: 'path', | ||
| props: [ | ||
| ['d', `M${originX} ${originY} L${x1} ${y1} A${r} ${r} 0 ${large} 1 ${x2} ${y2} z`], | ||
| let large = (end - begin) > 180 ? 1 : 0; | ||
| if(slg) { | ||
| let uuid = this.getSvgLg(slg); | ||
| stroke = `url(#${uuid})`; | ||
| } | ||
| if(flg) { | ||
| let uuid = this.getSvgLg(flg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| else if(frg) { | ||
| let uuid = this.getSvgRg(frg); | ||
| fill = `url(#${uuid})`; | ||
| } | ||
| if(this.edge) { | ||
| this.addGeom('path', [ | ||
| ['d', `M${cx} ${cy} L${x1} ${y1} A${r} ${r} 0 ${large} 1 ${x2} ${y2} z`], | ||
| ['fill', fill], | ||
@@ -121,9 +141,22 @@ ['stroke', stroke], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ], | ||
| }); | ||
| ]); | ||
| } | ||
| else { | ||
| this.addGeom('path', [ | ||
| ['d', `M${cx} ${cy} L${x1} ${y1} A${r} ${r} 0 ${large} 1 ${x2} ${y2} z`], | ||
| ['fill', fill] | ||
| ]); | ||
| this.addGeom('path', [ | ||
| ['d', `M${x1} ${y1} A${r} ${r} 0 ${large} 1 ${x2} ${y2}`], | ||
| ['fill', 'transparent'], | ||
| ['stroke', stroke], | ||
| ['stroke-width', strokeWidth], | ||
| ['stroke-dasharray', strokeDasharray] | ||
| ]); | ||
| } | ||
| } | ||
| } | ||
| get start() { | ||
| return this.__start; | ||
| get begin() { | ||
| return this.__begin; | ||
| } | ||
@@ -136,4 +169,7 @@ get end() { | ||
| } | ||
| get edge() { | ||
| return this.__edge; | ||
| } | ||
| } | ||
| export default Sector; |
@@ -12,3 +12,2 @@ import Dom from './node/Dom'; | ||
| import Ellipse from './geom/Ellipse'; | ||
| import Grid from './geom/Grid'; | ||
@@ -22,3 +21,2 @@ Geom.register('$line', Line); | ||
| Geom.register('$ellipse', Ellipse); | ||
| Geom.register('$grid', Grid); | ||
@@ -45,3 +43,3 @@ let karas = { | ||
| createGm(tagName, props) { | ||
| let klass = Geom.getImplement(tagName); | ||
| let klass = Geom.getRegister(tagName); | ||
| return new klass(tagName, props); | ||
@@ -48,0 +46,0 @@ }, |
@@ -87,3 +87,3 @@ import Dom from '../node/Dom'; | ||
| node.addEventListener(type, e => { | ||
| this.__cb(e, ['touchend', 'touchcancel'].indexOf(type) > -1); | ||
| this.__cb(e, ['touchend', 'touchcancel', 'touchmove'].indexOf(type) > -1); | ||
| }); | ||
@@ -90,0 +90,0 @@ }); |
@@ -76,2 +76,4 @@ import Node from './Node'; | ||
| this.__plw = 0; | ||
| this.__matrix = null; | ||
| this.__matrixEvent = null; | ||
| } | ||
@@ -283,11 +285,18 @@ | ||
| let oh = y4 - y; | ||
| let tfo = tf.getOrigin(transformOrigin, x, y, ow, oh); | ||
| let list = tf.normalize(transform, tfo[0], tfo[1], ow, oh); | ||
| let matrix = this.__matrix = tf.calMatrix(list, tfo[0], tfo[1]); | ||
| let matrix = tf.calMatrix(transform, transformOrigin, x, y, ow, oh); | ||
| this.__matrix = matrix; | ||
| let parent = this.parent; | ||
| while(parent) { | ||
| if(parent.matrix) { | ||
| matrix = tf.mergeMatrix(parent.matrix, matrix); | ||
| } | ||
| parent = parent.parent; | ||
| } | ||
| this.__matrixEvent = matrix; | ||
| if(renderMode === mode.CANVAS) { | ||
| // TODO: canvas递归transform处理 | ||
| ctx.setTransform(...matrix); | ||
| } else if(renderMode === mode.SVG) { | ||
| this.addTransform(['matrix', matrix.join(',')]); | ||
| } | ||
| else if(renderMode === mode.SVG) { | ||
| this.addTransform(['matrix', this.matrix.join(',')]); | ||
| } | ||
| } | ||
@@ -299,16 +308,8 @@ // 先渲染渐变，没有则背景色 | ||
| let cy = y2 + ih * 0.5; | ||
| // 需计算角度 https://www.w3cplus.com/css3/do-you-really-understand-css-linear-gradients.html | ||
| if(k === 'linear') { | ||
| let deg = gradient.getLinearDeg(v); | ||
| // 需计算角度 https://www.w3cplus.com/css3/do-you-really-understand-css-linear-gradients.html | ||
| let r = util.r2d(deg); | ||
| let length = Math.abs(iw * Math.sin(r)) + Math.abs(ih * Math.cos(r)); | ||
| let [xx0, yy0, xx1, yy1] = gradient.calLinearCoords(deg, length * 0.5, cx, cy); | ||
| let list = gradient.getColorStop(v, length); | ||
| let gd = gradient.getLinear(v, cx, cy, iw, ih); | ||
| if(renderMode === mode.CANVAS) { | ||
| let lg = ctx.createLinearGradient(xx0, yy0, xx1, yy1); | ||
| list.forEach(item => { | ||
| lg.addColorStop(item[1], item[0]); | ||
| }); | ||
| ctx.beginPath(); | ||
| ctx.fillStyle = lg; | ||
| ctx.fillStyle = this.getCanvasLg(gd); | ||
| ctx.rect(x2, y2, iw, ih); | ||
@@ -319,12 +320,3 @@ ctx.fill(); | ||
| else if(renderMode === mode.SVG) { | ||
| let uuid = this.defs.add({ | ||
| tagName: 'linearGradient', | ||
| props: [ | ||
| ['x1', xx0], | ||
| ['y1', yy0], | ||
| ['x2', xx1], | ||
| ['y2', yy1] | ||
| ], | ||
| stop: list, | ||
| }); | ||
| let uuid = this.getSvgLg(gd); | ||
| this.addBackground([ | ||
@@ -340,22 +332,6 @@ ['x', x2], | ||
| else if(k === 'radial') { | ||
| let [r, cx2, cy2] = gradient.calRadialRadius(v, iw, ih, cx, cy, x2, y2, x3, y3); | ||
| // 计算colorStop | ||
| let list = gradient.getColorStop(v, r * 2); | ||
| // 超限情况等同于只显示end的bgc | ||
| if(r <= 0) { | ||
| let end = list[list.length - 1]; | ||
| end[1] = 0; | ||
| list = [end]; | ||
| cx2 = x2; | ||
| cy2 = y2; | ||
| // 肯定大于最长直径 | ||
| r = iw + ih; | ||
| } | ||
| let gd = gradient.getRadial(v, cx, cy, x2, y2, x3, y3); | ||
| if(renderMode === mode.CANVAS) { | ||
| let rg = ctx.createRadialGradient(cx2, cy2, 0, cx2, cy2, r); | ||
| list.forEach(item => { | ||
| rg.addColorStop(item[1], item[0]); | ||
| }); | ||
| ctx.beginPath(); | ||
| ctx.fillStyle = rg; | ||
| ctx.fillStyle = this.getCanvasRg(gd); | ||
| ctx.rect(x2, y2, iw, ih); | ||
@@ -366,11 +342,3 @@ ctx.fill(); | ||
| else if(renderMode === mode.SVG) { | ||
| let uuid = this.defs.add({ | ||
| tagName: 'radialGradient', | ||
| props: [ | ||
| ['cx', cx2], | ||
| ['cy', cy2], | ||
| ['r', r] | ||
| ], | ||
| stop: list, | ||
| }); | ||
| let uuid = this.getSvgRg(gd); | ||
| this.addBackground([ | ||
@@ -386,3 +354,3 @@ ['x', x2], | ||
| } | ||
| else if(bgc && bgc !== 'transparent') { | ||
| else if(bgc !== 'transparent') { | ||
| if(renderMode === mode.CANVAS) { | ||
@@ -407,391 +375,23 @@ ctx.beginPath(); | ||
| if(btw > 0 && btc !== 'transparent') { | ||
| let points = []; | ||
| if(['dashed', 'dotted'].indexOf(bts) > -1) { | ||
| // 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
| let { n, ps, pd } = border.calDashed(bts, x1, x2, x3, x4, btw); | ||
| if(n <= 1) { | ||
| points.push([x1, y1, x4, y1, x3, y2, x2, y2]); | ||
| } | ||
| else { | ||
| let deg1 = Math.atan(btw / blw); | ||
| let deg2 = Math.atan(btw / brw); | ||
| for(let i = 0; i < n; i++) { | ||
| // 最后一个可能没有到底，延长之 | ||
| let isLast = i === n - 1; | ||
| let xx1 = i ? (x1 + ps * i + pd * i) : x1; | ||
| let xx4 = xx1 + ps; | ||
| let yy1; | ||
| let yy2; | ||
| // 整个和borderLeft重叠 | ||
| if(xx4 < x2) { | ||
| if(isLast) { | ||
| points.push([x1, y1, x4, y1, x3, y2, x2, y2]); | ||
| } | ||
| else { | ||
| yy1 = y1 + (xx1 - x1) * Math.tan(deg1); | ||
| yy2 = y1 + (xx4 - x1) * Math.tan(deg1); | ||
| points.push([xx1, y1, xx4, y1, xx4, yy2, xx1, yy1]); | ||
| } | ||
| } | ||
| // 整个和borderRight重叠 | ||
| else if(xx1 > x3) { | ||
| yy1 = y1 + (x4 - xx1) * Math.tan(deg2); | ||
| yy2 = y1 + (x4 - xx4) * Math.tan(deg2); | ||
| if(isLast) { | ||
| points.push([xx1, y1, x4, y1, xx1, yy1]); | ||
| } | ||
| else { | ||
| points.push([xx1, y1, xx4, y1, xx4, yy2, xx1, yy1]); | ||
| } | ||
| } | ||
| // 不被整个重叠的情况再细分 | ||
| else { | ||
| // 上部分和borderLeft重叠 | ||
| if(xx1 < x2) { | ||
| yy1 = y1 + (xx1 - x1) * Math.tan(deg1); | ||
| if(isLast) { | ||
| points.push([xx1, y1, x4, y1, x3, y2, x2, y2, xx1, yy1]); | ||
| } | ||
| else { | ||
| // 下部分和borderRight重叠 | ||
| if(xx4 > x3) { | ||
| points.push([xx1, y1, xx4, y1, x3, y2, x2, y2, xx1, yy1]); | ||
| } | ||
| // 下部独立 | ||
| else { | ||
| points.push([xx1, y1, xx4, y1, xx4, y2, x2, y2, xx1, yy1]); | ||
| } | ||
| } | ||
| } | ||
| // 下部分和borderRight重叠 | ||
| else if(xx4 > x3) { | ||
| yy1 = y1 + (x4 - xx4) * Math.tan(deg2); | ||
| // 上部分和borderLeft重叠 | ||
| if(xx1 < x2) { | ||
| if(isLast) { | ||
| points.push([xx1, y1, x4, y1, x3, y2, x2, y2, xx1, yy1]); | ||
| } | ||
| else { | ||
| points.push([xx1, y1, xx4, y1, xx4, yy1, x3, y2, x2, y2, xx1, yy1]); | ||
| } | ||
| } | ||
| // 上部独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([xx1, y1, x4, y1, x3, y2, xx1, y2]); | ||
| } | ||
| else { | ||
| points.push([xx1, y1, xx4, y1, xx4, yy1, x3, y2, xx1, y2]); | ||
| } | ||
| } | ||
| } | ||
| // 完全独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([xx1, y1, x4, y1, x3, y2, xx1, y2]); | ||
| } | ||
| else { | ||
| points.push([xx1, y1, xx4, y1, xx4, y2, xx1, y2]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| points.push([x1, y1, x4, y1, x3, y2, x2, y2]); | ||
| } | ||
| let deg1 = Math.atan(btw / blw); | ||
| let deg2 = Math.atan(btw / brw); | ||
| let points = border.calPoints(btw, bts, deg1, deg2, x1, x2, x3, x4, y1, y2, y3, y4, 0); | ||
| renderBorder(renderMode, points, btc, ctx, this); | ||
| } | ||
| if(brw > 0 && brc !== 'transparent') { | ||
| let points = []; | ||
| if(['dashed', 'dotted'].indexOf(brs) > -1) { | ||
| // 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
| let { n, ps, pd } = border.calDashed(brs, y1, y2, y3, y4, brw); | ||
| if(n <= 1) { | ||
| points.push([x3, y2, x4, y1, x4, y4, x3, y3]); | ||
| } | ||
| else { | ||
| let deg1 = Math.atan(brw / btw); | ||
| let deg2 = Math.atan(brw / bbw); | ||
| for(let i = 0; i < n; i++) { | ||
| // 最后一个可能没有到底，延长之 | ||
| let isLast = i === n - 1; | ||
| let yy1 = i ? (y1 + ps * i + pd * i) : y1; | ||
| let yy4 = yy1 + ps; | ||
| let xx1; | ||
| let xx2; | ||
| // 整个和borderTop重叠 | ||
| if(yy4 < y2) { | ||
| if(isLast) { | ||
| points.push([x3, y2, x4, y1, x4, y4, x3, y3]); | ||
| } | ||
| else { | ||
| xx1 = x4 - (yy4 - y1) * Math.tan(deg1); | ||
| xx2 = x4 - (yy1 - y1) * Math.tan(deg1); | ||
| points.push([xx1, yy4, xx2, yy1, x4, yy1, x4, yy4]); | ||
| } | ||
| } | ||
| // 整个和borderBottom重叠 | ||
| else if(yy1 > y3) { | ||
| xx1 = x3 + (yy1 - y3) * Math.tan(deg2); | ||
| xx2 = x3 + (yy4 - y3) * Math.tan(deg2); | ||
| if(isLast) { | ||
| points.push([xx1, yy1, x4, yy1, x4, y4]); | ||
| } | ||
| else { | ||
| points.push([xx1, yy1, x4, yy1, x4, yy4, xx2, yy4]); | ||
| } | ||
| } | ||
| // 不被整个重叠的情况再细分 | ||
| else { | ||
| // 上部分和borderTop重叠 | ||
| if(yy1 < y2) { | ||
| xx1 = x3 + (y2 - yy1) * Math.tan(deg1); | ||
| if(isLast) { | ||
| points.push([x3, y2, xx1, yy1, x4, yy1, x4, y4, x3, y4]); | ||
| } | ||
| else { | ||
| // 下部分和borderBottom重叠 | ||
| if(yy4 > y3) { | ||
| points.push([x3, y2, xx1, yy1, x4, yy1, x4, yy4, xx1, yy4, x3, y3]); | ||
| } | ||
| // 下部独立 | ||
| else { | ||
| points.push([x3, y2, xx1, yy1, x4, yy1, x4, yy4, x3, yy4]); | ||
| } | ||
| } | ||
| } | ||
| // 下部分和borderBottom重叠 | ||
| else if(yy4 > y3) { | ||
| xx1 = x3 + (yy4 - y3) * Math.tan(deg2); | ||
| // 上部分和borderTop重叠 | ||
| if(yy1 < y2) { | ||
| if(isLast) { | ||
| points.push([x3, y2, xx1, yy1, x4, yy1, x4, y4, x3, y3]); | ||
| } | ||
| else { | ||
| points.push([x3, y2, xx1, yy1, x4, yy1, x4, yy4, xx1, yy4, x3, y3]); | ||
| } | ||
| } | ||
| // 上部独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([x3, yy1, x4, yy1, x4, y4, x3, y3]); | ||
| } | ||
| else { | ||
| points.push([x3, yy1, x4, yy1, x4, yy4, xx1, yy4, x3, y3]); | ||
| } | ||
| } | ||
| } | ||
| // 完全独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([x3, yy1, x4, yy1, x4, y4, x3, y3]); | ||
| } | ||
| else { | ||
| points.push([x3, yy1, x4, yy1, x4, yy4, x3, yy4]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| points.push([x3, y2, x4, y1, x4, y4, x3, y3]); | ||
| } | ||
| let deg1 = Math.atan(brw / btw); | ||
| let deg2 = Math.atan(brw / bbw); | ||
| let points = border.calPoints(brw, brs, deg1, deg2, x1, x2, x3, x4, y1, y2, y3, y4, 1); | ||
| renderBorder(renderMode, points, brc, ctx, this); | ||
| } | ||
| if(bbw > 0 && bbc !== 'transparent') { | ||
| let points = []; | ||
| // 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
| if(['dashed', 'dotted'].indexOf(bbs) > -1) { | ||
| // 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
| let { n, ps, pd } = border.calDashed(bbs, x1, x2, x3, x4, bbw); | ||
| let deg1 = Math.atan(bbw / blw); | ||
| let deg2 = Math.atan(bbw / brw); | ||
| for(let i = 0; i < n; i++) { | ||
| // 最后一个可能没有到底，延长之 | ||
| let isLast = i === n - 1; | ||
| let xx1 = i ? (x1 + ps * i + pd * i) : x1; | ||
| let xx4 = xx1 + ps; | ||
| let yy1; | ||
| let yy2; | ||
| // 整个和borderLeft重叠 | ||
| if(xx4 < x2) { | ||
| if(isLast) { | ||
| points.push([x1, y4, x2, y3, x3, y3, x4, y4]); | ||
| } | ||
| else { | ||
| yy1 = y4 - (xx1 - x1) * Math.tan(deg1); | ||
| yy2 = y4 - (xx4 - x1) * Math.tan(deg1); | ||
| points.push([xx1, yy1, xx4, yy2, xx4, y4, xx1, y4]); | ||
| } | ||
| } | ||
| // 整个和borderRight重叠 | ||
| else if(xx1 > x3) { | ||
| yy1 = y4 - (xx1 - x1) * Math.tan(deg2); | ||
| yy2 = y4 - (xx4 - x1) * Math.tan(deg2); | ||
| if(isLast) { | ||
| points.push([xx1, yy1, x4, y4, xx1, y4]); | ||
| } | ||
| else { | ||
| points.push([xx1, yy1, xx4, yy2, xx4, y4, xx1, y4]); | ||
| } | ||
| } | ||
| // 不被整个重叠的情况再细分 | ||
| else { | ||
| // 上部分和borderLeft重叠 | ||
| if(xx1 < x2) { | ||
| yy1 = y3 + (xx1 - x1) * Math.tan(deg1); | ||
| if(isLast) { | ||
| points.push([xx1, yy1, x2, y3, x3, y3, x4, y4, xx1, y4]); | ||
| } | ||
| else { | ||
| // 下部分和borderRight重叠 | ||
| if(xx4 > x3) { | ||
| points.push([xx1, yy1, x2, y3, x3, y3, xx4, y4, xx1, y4]); | ||
| } | ||
| // 下部独立 | ||
| else { | ||
| points.push([xx1, yy1, x2, y3, xx4, y3, xx4, y4, xx1, y4]); | ||
| } | ||
| } | ||
| } | ||
| // 下部分和borderRight重叠 | ||
| else if(xx4 > x3) { | ||
| yy1 = y4 - (x4 - xx4) * Math.tan(deg2); | ||
| // 上部分和borderLeft重叠 | ||
| if(xx1 < x2) { | ||
| if(isLast) { | ||
| points.push([xx1, yy1, x3, y3, x4, y4, xx1, y4]); | ||
| } | ||
| else { | ||
| points.push([xx1, yy1, x3, y3, xx4, yy1, xx4, y4, xx1, y4]); | ||
| } | ||
| } | ||
| // 上部独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([xx1, y3, x3, y3, x4, y4, xx1, y4]); | ||
| } | ||
| else { | ||
| points.push([xx1, y3, x3, y3, xx4, yy1, xx4, y4, xx1, y4]); | ||
| } | ||
| } | ||
| } | ||
| // 完全独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([xx1, y3, x3, y3, x4, y4, xx1, y4]); | ||
| } | ||
| else { | ||
| points.push([xx1, y3, xx4, y3, xx4, y4, xx1, y4]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| points.push([x1, y4, x2, y3, x3, y3, x4, y4]); | ||
| } | ||
| let deg1 = Math.atan(bbw / blw); | ||
| let deg2 = Math.atan(bbw / brw); | ||
| let points = border.calPoints(bbw, bbs, deg1, deg2, x1, x2, x3, x4, y1, y2, y3, y4, 2); | ||
| renderBorder(renderMode, points, bbc, ctx, this); | ||
| } | ||
| if(blw > 0 && blc !== 'transparent') { | ||
| let points = []; | ||
| if(['dashed', 'dotted'].indexOf(bls) > -1) { | ||
| // 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
| let { n, ps, pd } = border.calDashed(bls, y1, y2, y3, y4, blw); | ||
| if(n <= 1) { | ||
| points.push([x1, y1, x2, y2, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| let deg1 = Math.atan(blw / btw); | ||
| let deg2 = Math.atan(blw / bbw); | ||
| for(let i = 0; i < n; i++) { | ||
| // 最后一个可能没有到底，延长之 | ||
| let isLast = i === n - 1; | ||
| let yy1 = i ? (y1 + ps * i + pd * i) : y1; | ||
| let yy4 = yy1 + ps; | ||
| let xx1; | ||
| let xx2; | ||
| // 整个和borderTop重叠 | ||
| if(yy4 < y2) { | ||
| if(isLast) { | ||
| points.push([x1, y1, x2, y2, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| xx1 = x1 + (yy1 - y1) * Math.tan(deg1); | ||
| xx2 = x1 + (yy4 - y1) * Math.tan(deg1); | ||
| points.push([x1, yy1, xx1, yy1, xx2, yy4, x1, yy4]); | ||
| } | ||
| } | ||
| // 整个和borderBottom重叠 | ||
| else if(yy1 > y3) { | ||
| xx1 = x1 + (y4 - yy1) * Math.tan(deg2); | ||
| xx2 = x1 + (y4 - yy4) * Math.tan(deg2); | ||
| if(isLast) { | ||
| points.push([x1, yy1, xx1, yy1, x1, y4]); | ||
| } | ||
| else { | ||
| points.push([x1, yy1, xx1, yy1, xx2, yy4, x1, yy4]); | ||
| } | ||
| } | ||
| // 不被整个重叠的情况再细分 | ||
| else { | ||
| // 上部分和borderTop重叠 | ||
| if(yy1 < y2) { | ||
| xx1 = x1 + (yy1 - y1) * Math.tan(deg1); | ||
| if(isLast) { | ||
| points.push([x1, yy1, xx1, yy1, x2, y2, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| // 下部分和borderBottom重叠 | ||
| if(yy4 > y3) { | ||
| points.push([x1, yy1, xx1, yy1, x2, y2, x2, y3, xx1, yy4, x1, yy4]); | ||
| } | ||
| // 下部独立 | ||
| else { | ||
| points.push([x1, yy1, xx1, yy1, x2, y2, x2, yy4, x1, yy4]); | ||
| } | ||
| } | ||
| } | ||
| // 下部分和borderBottom重叠 | ||
| else if(yy4 > y3) { | ||
| xx1 = x1 + (y4 - yy4) * Math.tan(deg2); | ||
| // 上部分和borderTop重叠 | ||
| if(yy1 < y2) { | ||
| if(isLast) { | ||
| points.push([x1, yy1, xx1, yy1, x2, y2, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| points.push([x1, yy1, xx1, yy1, x2, y2, x2, y3, xx1, yy4, x1, yy4]); | ||
| } | ||
| } | ||
| // 上部独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([x1, yy1, x2, yy1, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| points.push([x1, yy1, x2, yy1, x2, y3, xx1, yy4, x1, yy4]); | ||
| } | ||
| } | ||
| } | ||
| // 完全独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([x1, yy1, x2, yy1, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| points.push([x1, yy1, x2, yy1, x2, yy4, x1, yy4]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else { | ||
| points.push([x1, y1, x2, y2, x2, y3, x1, y4]); | ||
| } | ||
| let deg1 = Math.atan(blw / btw); | ||
| let deg2 = Math.atan(blw / bbw); | ||
| let points = border.calPoints(blw, bls, deg1, deg2, x1, x2, x3, x4, y1, y2, y3, y4, 3); | ||
| renderBorder(renderMode, points, blc, ctx, this); | ||
@@ -804,3 +404,3 @@ } | ||
| let { event: { type }, x, y, covers } = e; | ||
| let { listener, children, style, outerWidth, outerHeight, matrix } = this; | ||
| let { listener, children, style, outerWidth, outerHeight, matrixEvent } = this; | ||
| if(style.display === 'none') { | ||
@@ -852,3 +452,3 @@ return; | ||
| h: outerHeight, | ||
| matrix, | ||
| matrixEvent, | ||
| }); | ||
@@ -864,3 +464,3 @@ if(!e.target) { | ||
| let { x, y, covers } = e; | ||
| let { rx, ry, outerWidth, outerHeight, matrix } = this; | ||
| let { rx, ry, outerWidth, outerHeight, matrixEvent } = this; | ||
| let inThis = tf.pointInQuadrilateral(x - rx, y - ry, | ||
@@ -871,7 +471,7 @@ 0, 0, | ||
| outerWidth, outerHeight, | ||
| matrix); | ||
| matrixEvent); | ||
| if(inThis) { | ||
| // 不能被遮挡 | ||
| for(let i = 0, len = covers.length; i < len; i++) { | ||
| let { x: x2, y: y2, w, h, matrix } = covers[i]; | ||
| let { x: x2, y: y2, w, h, matrixEvent } = covers[i]; | ||
| if(tf.pointInQuadrilateral(x - rx, y - ry, | ||
@@ -882,3 +482,3 @@ x2 - rx, y2 - ry, | ||
| x2 - rx + w, y2 - ry + h, | ||
| matrix) | ||
| matrixEvent) | ||
| ) { | ||
@@ -895,2 +495,43 @@ return; | ||
| getCanvasLg(gd) { | ||
| let lg = this.ctx.createLinearGradient(gd.x1, gd.y1, gd.x2, gd.y2); | ||
| gd.stop.forEach(item => { | ||
| lg.addColorStop(item[1], item[0]); | ||
| }); | ||
| return lg; | ||
| } | ||
| getCanvasRg(gd) { | ||
| let rg = this.ctx.createRadialGradient(gd.cx, gd.cy, 0, gd.cx, gd.cy, gd.r); | ||
| gd.stop.forEach(item => { | ||
| rg.addColorStop(item[1], item[0]); | ||
| }); | ||
| return rg; | ||
| } | ||
| getSvgLg(gd) { | ||
| return this.defs.add({ | ||
| tagName: 'linearGradient', | ||
| props: [ | ||
| ['x1', gd.x1], | ||
| ['y1', gd.y1], | ||
| ['x2', gd.x2], | ||
| ['y2', gd.y2] | ||
| ], | ||
| stop: gd.stop, | ||
| }); | ||
| } | ||
| getSvgRg(gd) { | ||
| return this.defs.add({ | ||
| tagName: 'radialGradient', | ||
| props: [ | ||
| ['cx', gd.cx], | ||
| ['cy', gd.cy], | ||
| ['r', gd.r] | ||
| ], | ||
| stop: gd.stop, | ||
| }); | ||
| } | ||
| addBorder(props) { | ||
@@ -978,4 +619,7 @@ this.virtualDom.bb.push({ | ||
| } | ||
| get matrixEvent() { | ||
| return this.__matrixEvent; | ||
| } | ||
| } | ||
| export default Xom; |
@@ -79,4 +79,345 @@ /* 获取合适的虚线实体空白宽度ps/pd和数量n | ||
| // 获取边框分割为几块的坐标，虚线分割为若干四边形和三边型 | ||
| // direction为上右下左0123 | ||
| function calPoints(borderWidth, borderStyle, deg1, deg2, x1, x2, x3, x4, y1, y2, y3, y4, direction) { | ||
| let points = []; | ||
| if(['dashed', 'dotted'].indexOf(borderStyle) > -1) { | ||
| // 寻找一个合适的虚线线段长度和之间空白边距长度 | ||
| let { n, ps, pd } = (direction === 0 || direction === 2) | ||
| ? calDashed(borderStyle, x1, x2, x3, x4, borderWidth) | ||
| : calDashed(borderStyle, y1, y2, y3, y4, borderWidth); | ||
| if(n > 1) { | ||
| for(let i = 0; i < n; i++) { | ||
| // 最后一个可能没有到底，延长之 | ||
| let isLast = i === n - 1; | ||
| let main1; | ||
| let main2; | ||
| let cross1; | ||
| let cross2; | ||
| if(direction === 0 || direction === 2) { | ||
| main1 = i ? (x1 + ps * i + pd * i) : x1; | ||
| } | ||
| else { | ||
| main1 = i ? (y1 + ps * i + pd * i) : y1; | ||
| } | ||
| main2 = main1 + ps; | ||
| if(direction === 0) { | ||
| // 整个和borderLeft重叠 | ||
| if(main2 < x2) { | ||
| if(isLast) { | ||
| points.push([x1, y1, x4, y1, x3, y2, x2, y2]); | ||
| } | ||
| else { | ||
| cross1 = y1 + (main1 - x1) * Math.tan(deg1); | ||
| cross2 = y1 + (main2 - x1) * Math.tan(deg1); | ||
| points.push([main1, y1, main2, y1, main2, cross2, main1, cross1]); | ||
| } | ||
| } | ||
| // 整个和borderRight重叠 | ||
| else if(main1 > x3) { | ||
| cross1 = y1 + (x4 - main1) * Math.tan(deg2); | ||
| cross2 = y1 + (x4 - main2) * Math.tan(deg2); | ||
| if(isLast) { | ||
| points.push([main1, y1, x4, y1, main1, cross1]); | ||
| } | ||
| else { | ||
| points.push([main1, y1, main2, y1, main2, cross2, main1, cross1]); | ||
| } | ||
| } | ||
| // 不被整个重叠的情况再细分 | ||
| else { | ||
| // 上部分和borderLeft重叠 | ||
| if(main1 < x2) { | ||
| cross1 = y1 + (main1 - x1) * Math.tan(deg1); | ||
| if(isLast) { | ||
| points.push([main1, y1, x4, y1, x3, y2, x2, y2, main1, cross1]); | ||
| } | ||
| else { | ||
| // 下部分和borderRight重叠 | ||
| if(main2 > x3) { | ||
| points.push([main1, y1, main2, y1, x3, y2, x2, y2, main1, cross1]); | ||
| } | ||
| // 下部独立 | ||
| else { | ||
| points.push([main1, y1, main2, y1, main2, y2, x2, y2, main1, cross1]); | ||
| } | ||
| } | ||
| } | ||
| // 下部分和borderRight重叠 | ||
| else if(main2 > x3) { | ||
| cross1 = y1 + (x4 - main2) * Math.tan(deg2); | ||
| // 上部分和borderLeft重叠 | ||
| if(main1 < x2) { | ||
| if(isLast) { | ||
| points.push([main1, y1, x4, y1, x3, y2, x2, y2, main1, cross1]); | ||
| } | ||
| else { | ||
| points.push([main1, y1, main2, y1, main2, cross1, x3, y2, x2, y2, main1, cross1]); | ||
| } | ||
| } | ||
| // 上部独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([main1, y1, x4, y1, x3, y2, main1, y2]); | ||
| } | ||
| else { | ||
| points.push([main1, y1, main2, y1, main2, cross1, x3, y2, main1, y2]); | ||
| } | ||
| } | ||
| } | ||
| // 完全独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([main1, y1, x4, y1, x3, y2, main1, y2]); | ||
| } | ||
| else { | ||
| points.push([main1, y1, main2, y1, main2, y2, main1, y2]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else if(direction === 1) { | ||
| // 整个和borderTop重叠 | ||
| if(main2 < y2) { | ||
| if(isLast) { | ||
| points.push([x3, y2, x4, y1, x4, y4, x3, y3]); | ||
| } | ||
| else { | ||
| cross1 = x4 - (main2 - y1) * Math.tan(deg1); | ||
| cross2 = x4 - (main1 - y1) * Math.tan(deg1); | ||
| points.push([cross1, main2, cross2, main1, x4, main1, x4, main2]); | ||
| } | ||
| } | ||
| // 整个和borderBottom重叠 | ||
| else if(main1 > y3) { | ||
| cross1 = x3 + (main1 - y3) * Math.tan(deg2); | ||
| cross2 = x3 + (main2 - y3) * Math.tan(deg2); | ||
| if(isLast) { | ||
| points.push([cross1, main1, x4, main1, x4, y4]); | ||
| } | ||
| else { | ||
| points.push([cross1, main1, x4, main1, x4, main2, cross2, main2]); | ||
| } | ||
| } | ||
| // 不被整个重叠的情况再细分 | ||
| else { | ||
| // 上部分和borderTop重叠 | ||
| if(main1 < y2) { | ||
| cross1 = x3 + (y2 - main1) * Math.tan(deg1); | ||
| if(isLast) { | ||
| points.push([x3, y2, cross1, main1, x4, main1, x4, y4, x3, y4]); | ||
| } else { | ||
| // 下部分和borderBottom重叠 | ||
| if(main2 > y3) { | ||
| points.push([x3, y2, cross1, main1, x4, main1, x4, main2, cross1, main2, x3, y3]); | ||
| } | ||
| // 下部独立 | ||
| else { | ||
| points.push([x3, y2, cross1, main1, x4, main1, x4, main2, x3, main2]); | ||
| } | ||
| } | ||
| } | ||
| // 下部分和borderBottom重叠 | ||
| else if(main2 > y3) { | ||
| cross1 = x3 + (main2 - y3) * Math.tan(deg2); | ||
| // 上部分和borderTop重叠 | ||
| if(main1 < y2) { | ||
| if(isLast) { | ||
| points.push([x3, y2, cross1, main1, x4, main1, x4, y4, x3, y3]); | ||
| } else { | ||
| points.push([x3, y2, cross1, main1, x4, main1, x4, main2, cross1, main2, x3, y3]); | ||
| } | ||
| } | ||
| // 上部独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([x3, main1, x4, main1, x4, y4, x3, y3]); | ||
| } else { | ||
| points.push([x3, main1, x4, main1, x4, main2, cross1, main2, x3, y3]); | ||
| } | ||
| } | ||
| } | ||
| // 完全独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([x3, main1, x4, main1, x4, y4, x3, y3]); | ||
| } else { | ||
| points.push([x3, main1, x4, main1, x4, main2, x3, main2]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else if(direction === 2) { | ||
| // 整个和borderLeft重叠 | ||
| if(main2 < x2) { | ||
| if(isLast) { | ||
| points.push([x1, y4, x2, y3, x3, y3, x4, y4]); | ||
| } | ||
| else { | ||
| cross1 = y4 - (main1 - x1) * Math.tan(deg1); | ||
| cross2 = y4 - (main2 - x1) * Math.tan(deg1); | ||
| points.push([main1, cross1, main2, cross2, main2, y4, main1, y4]); | ||
| } | ||
| } | ||
| // 整个和borderRight重叠 | ||
| else if(main1 > x3) { | ||
| cross1 = y4 - (main1 - x1) * Math.tan(deg2); | ||
| cross2 = y4 - (main2 - x1) * Math.tan(deg2); | ||
| if(isLast) { | ||
| points.push([main1, cross1, x4, y4, main1, y4]); | ||
| } | ||
| else { | ||
| points.push([main1, cross1, main2, cross2, main2, y4, main1, y4]); | ||
| } | ||
| } | ||
| // 不被整个重叠的情况再细分 | ||
| else { | ||
| // 上部分和borderLeft重叠 | ||
| if(main1 < x2) { | ||
| cross1 = y3 + (main1 - x1) * Math.tan(deg1); | ||
| if(isLast) { | ||
| points.push([main1, cross1, x2, y3, x3, y3, x4, y4, main1, y4]); | ||
| } | ||
| else { | ||
| // 下部分和borderRight重叠 | ||
| if(main2 > x3) { | ||
| points.push([main1, cross1, x2, y3, x3, y3, main2, y4, main1, y4]); | ||
| } | ||
| // 下部独立 | ||
| else { | ||
| points.push([main1, cross1, x2, y3, main2, y3, main2, y4, main1, y4]); | ||
| } | ||
| } | ||
| } | ||
| // 下部分和borderRight重叠 | ||
| else if(main2 > x3) { | ||
| cross1 = y4 - (x4 - main2) * Math.tan(deg2); | ||
| // 上部分和borderLeft重叠 | ||
| if(main1 < x2) { | ||
| if(isLast) { | ||
| points.push([main1, cross1, x3, y3, x4, y4, main1, y4]); | ||
| } | ||
| else { | ||
| points.push([main1, cross1, x3, y3, main2, cross1, main2, y4, main1, y4]); | ||
| } | ||
| } | ||
| // 上部独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([main1, y3, x3, y3, x4, y4, main1, y4]); | ||
| } | ||
| else { | ||
| points.push([main1, y3, x3, y3, main2, cross1, main2, y4, main1, y4]); | ||
| } | ||
| } | ||
| } | ||
| // 完全独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([main1, y3, x3, y3, x4, y4, main1, y4]); | ||
| } | ||
| else { | ||
| points.push([main1, y3, main2, y3, main2, y4, main1, y4]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| else if(direction === 3) { | ||
| // 整个和borderTop重叠 | ||
| if(main2 < y2) { | ||
| if(isLast) { | ||
| points.push([x1, y1, x2, y2, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| cross1 = x1 + (main1 - y1) * Math.tan(deg1); | ||
| cross2 = x1 + (main2 - y1) * Math.tan(deg1); | ||
| points.push([x1, main1, cross1, main1, cross2, main2, x1, main2]); | ||
| } | ||
| } | ||
| // 整个和borderBottom重叠 | ||
| else if(main1 > y3) { | ||
| cross1 = x1 + (y4 - main1) * Math.tan(deg2); | ||
| cross2 = x1 + (y4 - main2) * Math.tan(deg2); | ||
| if(isLast) { | ||
| points.push([x1, main1, cross1, main1, x1, y4]); | ||
| } | ||
| else { | ||
| points.push([x1, main1, cross1, main1, cross2, main2, x1, main2]); | ||
| } | ||
| } | ||
| // 不被整个重叠的情况再细分 | ||
| else { | ||
| // 上部分和borderTop重叠 | ||
| if(main1 < y2) { | ||
| cross1 = x1 + (main1 - y1) * Math.tan(deg1); | ||
| if(isLast) { | ||
| points.push([x1, main1, cross1, main1, x2, y2, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| // 下部分和borderBottom重叠 | ||
| if(main2 > y3) { | ||
| points.push([x1, main1, cross1, main1, x2, y2, x2, y3, cross1, main2, x1, main2]); | ||
| } | ||
| // 下部独立 | ||
| else { | ||
| points.push([x1, main1, cross1, main1, x2, y2, x2, main2, x1, main2]); | ||
| } | ||
| } | ||
| } | ||
| // 下部分和borderBottom重叠 | ||
| else if(main2 > y3) { | ||
| cross1 = x1 + (y4 - main2) * Math.tan(deg2); | ||
| // 上部分和borderTop重叠 | ||
| if(main1 < y2) { | ||
| if(isLast) { | ||
| points.push([x1, main1, cross1, main1, x2, y2, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| points.push([x1, main1, cross1, main1, x2, y2, x2, y3, cross1, main2, x1, main2]); | ||
| } | ||
| } | ||
| // 上部独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([x1, main1, x2, main1, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| points.push([x1, main1, x2, main1, x2, y3, cross1, main2, x1, main2]); | ||
| } | ||
| } | ||
| } | ||
| // 完全独立 | ||
| else { | ||
| if(isLast) { | ||
| points.push([x1, main1, x2, main1, x2, y3, x1, y4]); | ||
| } | ||
| else { | ||
| points.push([x1, main1, x2, main1, x2, main2, x1, main2]); | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| return points; | ||
| } | ||
| } | ||
| // 兜底返回实线 | ||
| if(direction === 0) { | ||
| points.push([x1, y1, x4, y1, x3, y2, x2, y2]); | ||
| } | ||
| else if(direction === 1){ | ||
| points.push([x3, y2, x4, y1, x4, y4, x3, y3]); | ||
| } | ||
| else if(direction === 2){ | ||
| points.push([x1, y4, x2, y3, x3, y3, x4, y4]); | ||
| } | ||
| else if(direction === 3){ | ||
| points.push([x1, y1, x2, y2, x2, y3, x1, y4]); | ||
| } | ||
| return points; | ||
| } | ||
| export default { | ||
| calDashed, | ||
| calPoints, | ||
| }; |
| import unit from './unit'; | ||
| import font from './font'; | ||
| import reset from './reset'; | ||
| import gradient from './gradient'; | ||
@@ -10,3 +11,3 @@ function parserOneBorder(style, direction) { | ||
| } | ||
| let w = /\b\d+px\b/i.exec(style[key]); | ||
| let w = /\b[\d.]+px\b/i.exec(style[key]); | ||
| if(w) { | ||
@@ -81,11 +82,8 @@ style[key + 'Width'] = w[0]; | ||
| let temp = style.background; | ||
| // 处理缩写 | ||
| // 处理渐变背景色 | ||
| if(temp) { | ||
| // 优先gradient，没有再考虑颜色 | ||
| let gradient = /\b(\w+)-gradient\((.+)\)/.exec(temp); | ||
| if(gradient) { | ||
| style.backgroundGradient = { | ||
| k: gradient[1], | ||
| v: gradient[2].split(/\s*,\s*/), | ||
| }; | ||
| let gd = gradient.parseGradient(temp); | ||
| if(gd) { | ||
| style.backgroundGradient = gd; | ||
| } | ||
@@ -104,2 +102,3 @@ else { | ||
| } | ||
| // 处理缩写 | ||
| temp = style.flex; | ||
@@ -174,6 +173,2 @@ if(temp) { | ||
| } | ||
| temp = style.borderRadius; | ||
| if(temp) { | ||
| style.borderTopRightRadius = style.borderTopLeftRadius = style.borderBottomRightRadius = style.borderBottomLeftRadius = temp; | ||
| } | ||
| temp = style.transform; | ||
@@ -194,8 +189,5 @@ if(temp) { | ||
| } | ||
| else if(arr.length < 6) { | ||
| while(arr.length < 6) { | ||
| arr.push(0); | ||
| } | ||
| if(arr.length === 6) { | ||
| transform.push(['matrix', arr]); | ||
| } | ||
| transform.push(['matrix', arr]); | ||
| } | ||
@@ -225,7 +217,9 @@ else if(k === 'translateX') { | ||
| let arr = v.split(/\s*,\s*/); | ||
| transform.push(['scaleX', parseFloat(arr[0]) || 0]); | ||
| transform.push(['scaleX', parseFloat(arr[1]) || 0]); | ||
| let x = parseFloat(arr[0]) || 0; | ||
| let y = parseFloat(arr[arr.length - 1]) || 0; | ||
| transform.push(['scaleX', x]); | ||
| transform.push(['scaleY', y]); | ||
| } | ||
| else if(k === 'rotateZ' || k === 'rotate') { | ||
| transform.push(['rotate', parseFloat(v) || 0]); | ||
| transform.push(['rotateZ', parseFloat(v) || 0]); | ||
| } | ||
@@ -240,4 +234,6 @@ else if(k === 'skewX') { | ||
| let arr = v.split(/\s*,\s*/); | ||
| transform.push(['skewX', parseFloat(arr[0]) || 0]); | ||
| transform.push(['skewY', parseFloat(arr[1]) || 0]); | ||
| let x = parseFloat(arr[0]) || 0; | ||
| let y = parseFloat(arr[arr.length - 1]) || 0; | ||
| transform.push(['skewX', x]); | ||
| transform.push(['skewY', y]); | ||
| } | ||
@@ -244,0 +240,0 @@ }); |
@@ -38,9 +38,3 @@ import util from "../util"; | ||
| } | ||
| while(deg >= 360) { | ||
| deg = deg % 360; | ||
| } | ||
| while(deg < 0) { | ||
| deg += 360; | ||
| } | ||
| return deg; | ||
| return deg % 360; | ||
| } | ||
@@ -240,3 +234,3 @@ | ||
| // 获取径向渐变半径 | ||
| function calRadialRadius(v, iw, ih, cx, cy, x2, y2, x3, y3) { | ||
| function calRadialRadius(v, iw, ih, cx, cy, x1, y1, x2, y2) { | ||
| let size = 'farthest-corner'; | ||
@@ -274,6 +268,6 @@ let r; // 半径 | ||
| if(s[1].indexOf('px') > -1) { | ||
| cx = x2 + parseFloat(s[1]); | ||
| cx = x1 + parseFloat(s[1]); | ||
| } | ||
| else { | ||
| cx = x2 + parseFloat(s[1]) * iw * 0.01; | ||
| cx = x1 + parseFloat(s[1]) * iw * 0.01; | ||
| } | ||
@@ -283,6 +277,6 @@ // y可以省略，此时等同于x | ||
| if(by.indexOf('px') > -1) { | ||
| cy = y2 + parseFloat(by); | ||
| cy = y1 + parseFloat(by); | ||
| } | ||
| else { | ||
| cy = y2 + parseFloat(by) * ih * 0.01; | ||
| cy = y1 + parseFloat(by) * ih * 0.01; | ||
| } | ||
@@ -298,3 +292,3 @@ } | ||
| // 在边外特殊情况只有end颜色填充 | ||
| if(cx <= x2 || cx >= x3 || cy <= y2 || cy >= y3) { | ||
| if(cx <= x1 || cx >= x2 || cy <= y1 || cy >= y2) { | ||
| r = 0; | ||
@@ -305,11 +299,11 @@ } | ||
| let yl; | ||
| if(cx < x2 + iw * 0.5) { | ||
| xl = cx - x2; | ||
| if(cx < x1 + iw * 0.5) { | ||
| xl = cx - x1; | ||
| } else { | ||
| xl = x3 - cx; | ||
| xl = x2 - cx; | ||
| } | ||
| if(cy < y2 + ih * 0.5) { | ||
| yl = cy - y2; | ||
| if(cy < y1 + ih * 0.5) { | ||
| yl = cy - y1; | ||
| } else { | ||
| yl = y3 - cy; | ||
| yl = y2 - cy; | ||
| } | ||
@@ -322,13 +316,13 @@ r = Math.min(xl, yl); | ||
| let yl; | ||
| if(cx < x2 + iw * 0.5) { | ||
| xl = cx - x2; | ||
| if(cx < x1 + iw * 0.5) { | ||
| xl = cx - x1; | ||
| } | ||
| else { | ||
| xl = x3 - cx; | ||
| xl = x2 - cx; | ||
| } | ||
| if(cy < y2 + ih * 0.5) { | ||
| yl = cy - y2; | ||
| if(cy < y1 + ih * 0.5) { | ||
| yl = cy - y1; | ||
| } | ||
| else { | ||
| yl = y3 - cy; | ||
| yl = y2 - cy; | ||
| } | ||
@@ -338,17 +332,17 @@ r = Math.sqrt(Math.pow(xl, 2) + Math.pow(yl, 2)); | ||
| else if(size === 'farthest-side') { | ||
| if(cx <= x2) { | ||
| r = x2 - cx + iw; | ||
| if(cx <= x1) { | ||
| r = x1 - cx + iw; | ||
| } | ||
| else if(cx >= x3) { | ||
| r = cx - x3 + iw; | ||
| else if(cx >= x2) { | ||
| r = cx - x2 + iw; | ||
| } | ||
| else if(cy <= y2) { | ||
| r = y2 - cy + ih; | ||
| else if(cy <= y1) { | ||
| r = y1 - cy + ih; | ||
| } | ||
| else if(cx >= y3) { | ||
| r = cy - y3 + ih; | ||
| else if(cx >= y2) { | ||
| r = cy - y2 + ih; | ||
| } | ||
| else { | ||
| let xl = Math.max(x3 - cx, cx - x2); | ||
| let yl = Math.max(y3 - cy, cy - y2); | ||
| let xl = Math.max(x2 - cx, cx - x1); | ||
| let yl = Math.max(y2 - cy, cy - y1); | ||
| r = Math.max(xl, yl); | ||
@@ -361,13 +355,13 @@ } | ||
| let yl; | ||
| if(cx < x2 + iw * 0.5) { | ||
| xl = x3 - cx; | ||
| if(cx < x1 + iw * 0.5) { | ||
| xl = x2 - cx; | ||
| } | ||
| else { | ||
| xl = cx - x2; | ||
| xl = cx - x1; | ||
| } | ||
| if(cy < y2 + ih * 0.5) { | ||
| yl = y3 - cy; | ||
| if(cy < y1 + ih * 0.5) { | ||
| yl = y2 - cy; | ||
| } | ||
| else { | ||
| yl = cy - y2; | ||
| yl = cy - y1; | ||
| } | ||
@@ -430,7 +424,54 @@ r = Math.sqrt(Math.pow(xl, 2) + Math.pow(yl, 2)); | ||
| function parseGradient(s) { | ||
| let gradient = /\b(\w+)-gradient\((.+)\)/.exec(s); | ||
| if(gradient) { | ||
| return { | ||
| k: gradient[1], | ||
| v: gradient[2].split(/\s*,\s*/), | ||
| }; | ||
| } | ||
| } | ||
| function getLinear(v, cx, cy, w, h) { | ||
| let deg = getLinearDeg(v); | ||
| let theta = util.r2d(deg); | ||
| let length = Math.abs(w * Math.sin(theta)) + Math.abs(h * Math.cos(theta)); | ||
| let [x1, y1, x2, y2] = calLinearCoords(deg, length * 0.5, cx, cy); | ||
| let stop = getColorStop(v, length); | ||
| return { | ||
| x1, | ||
| y1, | ||
| x2, | ||
| y2, | ||
| stop, | ||
| }; | ||
| } | ||
| function getRadial(v, cx, cy, x1, y1, x2, y2) { | ||
| let w = x2 - x1; | ||
| let h = y2 - y1; | ||
| let [r, cx2, cy2] = calRadialRadius(v, w, h, cx, cy, x1, y1, x2, y2); | ||
| let stop = getColorStop(v, r * 2); | ||
| // 超限情况等同于只显示end的bgc | ||
| if(r <= 0) { | ||
| let end = stop[stop.length - 1]; | ||
| end[1] = 0; | ||
| stop = [end]; | ||
| cx2 = x1; | ||
| cy2 = y1; | ||
| // 肯定大于最长直径 | ||
| r = w + h; | ||
| } | ||
| return { | ||
| cx: cx2, | ||
| cy: cy2, | ||
| r, | ||
| stop, | ||
| }; | ||
| } | ||
| export default { | ||
| getLinearDeg, | ||
| getColorStop, | ||
| calLinearCoords, | ||
| calRadialRadius, | ||
| parseGradient, | ||
| getLinear, | ||
| getRadial, | ||
| }; |
@@ -23,2 +23,3 @@ const RESET = { | ||
| lineHeight: 'normal', | ||
| backgroundColor: 'transparent', | ||
| borderTopWidth: 0, | ||
@@ -52,5 +53,5 @@ borderRightWidth: 0, | ||
| transformOrigin: 'center', | ||
| fill: '#000', | ||
| fill: 'transparent', | ||
| stroke: '#000', | ||
| strokeWidth: 0, | ||
| strokeWidth: 1, | ||
| strokeDasharray: [], | ||
@@ -57,0 +58,0 @@ }; |
| import unit from '../style/unit'; | ||
| import util from '../util'; | ||
| function calMatrix(transform, ox, oy) { | ||
| let matrix = [1, 0, 0, 1, 0, 0]; | ||
| let tx = 0; | ||
| let ty = 0; | ||
| let rd = 0; | ||
| let sdx = 0; | ||
| let sdy = 0; | ||
| let sx = 1; | ||
| let sy = 1; | ||
| let hasRotate; | ||
| transform.forEach(item => { | ||
| function calMatrix(transform, transformOrigin, x, y, ow, oh) { | ||
| let [ox, oy] = getOrigin(transformOrigin, x, y, ow, oh); | ||
| let list = normalize(transform, ox, oy, ow, oh); | ||
| let matrix = identity(); | ||
| matrix[12] = ox; | ||
| matrix[13] = oy; | ||
| let deg = 0; | ||
| list.forEach(item => { | ||
| let [k, v] = item; | ||
| let target = identity(); | ||
| if(k === 'translateX') { | ||
| tx += v; | ||
| if(hasRotate) { | ||
| ox -= v; | ||
| } | ||
| target[12] = v; | ||
| } | ||
| else if(k === 'translateY') { | ||
| ty += v; | ||
| if(hasRotate) { | ||
| oy -= v; | ||
| } | ||
| target[13] = v; | ||
| } | ||
| else if(k === 'scaleX') { | ||
| sx *= v; | ||
| target[0] = v; | ||
| } | ||
| else if(k === 'scaleY') { | ||
| sy *= v; | ||
| target[5] = v; | ||
| } | ||
| else if(k === 'skewX') { | ||
| sdx += v; | ||
| v = util.r2d(v); | ||
| let tan = Math.tan(v); | ||
| target[4] = tan; | ||
| } | ||
| else if(k === 'skewY') { | ||
| sdy += v; | ||
| v = util.r2d(v); | ||
| let tan = Math.tan(v); | ||
| target[1] = tan; | ||
| } | ||
| else if(k === 'rotate') { | ||
| rd += v; | ||
| hasRotate = true; | ||
| else if(k === 'rotateZ') { | ||
| v = util.r2d(v); | ||
| deg += v; | ||
| let sin = Math.sin(v); | ||
| let cos = Math.cos(v); | ||
| target[0] = target[5] = cos; | ||
| target[1] = sin; | ||
| target[4] = -sin; | ||
| } | ||
| else if(k === 'matrix') { | ||
| target[0] = v[0]; | ||
| target[1] = v[1]; | ||
| target[4] = v[2]; | ||
| target[5] = v[3]; | ||
| target[12] = v[4]; | ||
| target[13] = v[5]; | ||
| } | ||
| matrix = multiply(matrix, target); | ||
| }); | ||
| rd = util.r2d(rd); | ||
| sdx = util.r2d(sdx); | ||
| sdy = util.r2d(sdy); | ||
| matrix[0] = sx * Math.cos(rd); | ||
| matrix[1] = sy * Math.sin(rd) + sy * Math.tan(sdy); | ||
| matrix[2] = -sx * Math.sin(rd) + sx * Math.tan(sdx); | ||
| matrix[3] = sy * Math.cos(rd); | ||
| matrix[4] = (-ox * Math.cos(rd) + oy * Math.sin(rd) + ox) * sx + tx + ox - sx * ox; | ||
| matrix[5] = (-ox * Math.sin(rd) - oy * Math.cos(rd) + oy) * sy + ty + oy - sy * oy; | ||
| let target = identity(); | ||
| target[12] = -ox; | ||
| target[13] = -oy; | ||
| matrix = multiply(matrix, target); | ||
| return [ | ||
| matrix[0], matrix[1], | ||
| matrix[4], matrix[5], | ||
| matrix[12], matrix[13] | ||
| ]; | ||
| } | ||
| // 生成4*4单位矩阵 | ||
| function identity() { | ||
| const matrix = []; | ||
| for (let i = 0; i < 16; i++) { | ||
| matrix.push(i % 5 === 0 ? 1 : 0); | ||
| } | ||
| return matrix; | ||
| } | ||
| // 矩阵a*b | ||
| function multiply(a, b) { | ||
| let res = []; | ||
| for(let i = 0; i < 4; i++) { | ||
| const row = [a[i], a[i + 4], a[i + 8], a[i + 12]]; | ||
| for(let j = 0; j < 4; j++) { | ||
| let k = j * 4; | ||
| let col = [b[k], b[k + 1], b[k + 2], b[k + 3]]; | ||
| let n = row[0] * col[0] + row[1] * col[1] + row[2] * col[2] + row[3] * col[3]; | ||
| res[i + k] = n; | ||
| } | ||
| } | ||
| return res; | ||
| } | ||
| function transformPoint(matrix, x, y) { | ||
@@ -86,2 +119,3 @@ let [a, b, c, d, e, f] = matrix; | ||
| function normalize(transform, ox, oy, w, h) { | ||
| let res = []; | ||
| transform.forEach(item => { | ||
@@ -91,6 +125,6 @@ let [k, v] = item; | ||
| if(v.unit === unit.PERCENT) { | ||
| item[1] = v.value * w * 0.01; | ||
| res.push([item[0], v.value * w * 0.01]); | ||
| } | ||
| else { | ||
| item[1] = v.value; | ||
| res.push([item[0], item[1].value]); | ||
| } | ||
@@ -100,10 +134,13 @@ } | ||
| if(v.unit === unit.PERCENT) { | ||
| item[1] = v.value * h * 0.01; | ||
| res.push([item[0], v.value * h * 0.01]); | ||
| } | ||
| else { | ||
| item[1] = v.value; | ||
| res.push([item[0], item[1].value]); | ||
| } | ||
| } | ||
| else { | ||
| res.push([item[0], item[1]]); | ||
| } | ||
| }); | ||
| return transform; | ||
| return res; | ||
| } | ||
@@ -139,7 +176,29 @@ | ||
| function mergeMatrix(a, b) { | ||
| let m1 = identity(); | ||
| m1[0] = a[0]; | ||
| m1[1] = a[1]; | ||
| m1[4] = a[2]; | ||
| m1[5] = a[3]; | ||
| m1[12] = a[4]; | ||
| m1[13] = a[5]; | ||
| let m2 = identity(); | ||
| m2[0] = b[0]; | ||
| m2[1] = b[1]; | ||
| m2[4] = b[2]; | ||
| m2[5] = b[3]; | ||
| m2[12] = b[4]; | ||
| m2[13] = b[5]; | ||
| let matrix = multiply(m1, m2); | ||
| return [ | ||
| matrix[0], matrix[1], | ||
| matrix[4], matrix[5], | ||
| matrix[12], matrix[13] | ||
| ]; | ||
| } | ||
| export default { | ||
| calMatrix, | ||
| pointInQuadrilateral, | ||
| normalize, | ||
| getOrigin, | ||
| mergeMatrix, | ||
| }; |
@@ -161,2 +161,5 @@ let toString = {}.toString; | ||
| function hash2arr(hash) { | ||
| if(Array.isArray(hash)) { | ||
| return hash; | ||
| } | ||
| let arr = []; | ||
@@ -163,0 +166,0 @@ for(let list = Object.keys(hash), i = 0, len = list.length; i < len; i++) { |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by0.28%
10619
Worsened metrics
- Total package byte prevSize
- decreased by-2.98%
929701
- Number of package files
- decreased by-2.63%
37
No dependency changes