mirror of https://gitee.com/antv-l7/antv-l7
Merge branch 'pick' into 'master'
Pick 修复了geojson 面状图形高亮颜色错乱的问题 See merge request !10
This commit is contained in:
thinkinggis
commit
d5eeed93b1
|
|
@ -30,7 +30,7 @@ const scene = new L7.Scene({
|
|||
});
|
||||
scene.on('loaded', () => {
|
||||
$.get('https://gw.alipayobjects.com/os/rmsportal/oVTMqfzuuRFKiDwhPSFL.json', data => {
|
||||
scene.PointLayer({
|
||||
window.layer = scene.PointLayer({
|
||||
zIndex: 2
|
||||
})
|
||||
.source(data.list, {
|
||||
|
|
|
|||
|
|
@ -96,7 +96,7 @@ scene.on('loaded', () => {
|
|||
})
|
||||
.render();
|
||||
|
||||
|
||||
console.log(citylayer);
|
||||
citylayer.on('click',(e)=>{
|
||||
$("#info").css({'left': e.pixel.x,'top':e.pixel.y, display:'block'});
|
||||
$("#info").html(`<p>${e.feature.properties.area || e.feature.properties.name }<span">${e.feature.properties.pm2_5_24h || 0}</span></p>`);
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ class Picking {
|
|||
}
|
||||
const item = {
|
||||
layerId,
|
||||
featureId: id - 1,
|
||||
featureId: id,
|
||||
point2d: _point2d,
|
||||
point3d: _point3d,
|
||||
intersects
|
||||
|
|
|
|||
|
|
@ -213,6 +213,10 @@ export default class Layer extends Base {
|
|||
}
|
||||
texture() {
|
||||
|
||||
}
|
||||
fitBounds() {
|
||||
const extent = this.layerSource.data.extent;
|
||||
this.scene.fitBounds(extent);
|
||||
}
|
||||
hide() {
|
||||
this._visible(false);
|
||||
|
|
@ -276,12 +280,12 @@ export default class Layer extends Base {
|
|||
const { featureId } = e;
|
||||
if (featureId < 0) return;
|
||||
const activeStyle = this.get('activedOptions');
|
||||
// const selectFeatureIds = this.layerSource.getSelectFeatureId(featureId);
|
||||
const selectFeatureIndexId = this.layerSource.getSeletFeatureIndex(featureId);
|
||||
// 如果数据不显示状态则不进行高亮
|
||||
if (this.layerData[featureId].hasOwnProperty('filter') && this.layerData[featureId].filter === false) { return; }
|
||||
const style = Util.assign({}, this.layerData[featureId]);
|
||||
const style = Util.assign({}, this.layerData[selectFeatureIndexId]); // 要素ID 和dataId不是对应关系
|
||||
style.color = ColorUtil.toRGB(activeStyle.fill).map(e => e / 255);
|
||||
this.updateStyle([ featureId ], style);
|
||||
this.updateStyle([ featureId ], style, selectFeatureIndexId);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -347,6 +351,7 @@ export default class Layer extends Base {
|
|||
const attr = attrs[k];
|
||||
attr.needUpdate = false;
|
||||
const names = attr.names;
|
||||
|
||||
const values = self._getAttrValues(attr, record);
|
||||
if (names.length > 1) { // position 之类的生成多个字段的属性
|
||||
for (let j = 0; j < values.length; j++) {
|
||||
|
|
@ -472,10 +477,10 @@ export default class Layer extends Base {
|
|||
}
|
||||
_initEvents() {
|
||||
this.scene.on('pick-' + this.layerId, e => {
|
||||
const { featureId, point2d, type } = e;
|
||||
let { featureId, point2d, type } = e;
|
||||
if (featureId < -100 && this._activeIds !== null) {
|
||||
this.emit('mouseleave');
|
||||
return;
|
||||
type = 'mouseleave';
|
||||
featureId = this._activeIds[0];
|
||||
}
|
||||
const feature = this.layerSource.getSelectFeature(featureId);
|
||||
const lnglat = this.scene.containerToLngLat(point2d);
|
||||
|
|
@ -483,6 +488,7 @@ export default class Layer extends Base {
|
|||
featureId,
|
||||
feature,
|
||||
pixel: point2d,
|
||||
type,
|
||||
lnglat: { lng: lnglat.lng, lat: lnglat.lat }
|
||||
};
|
||||
if (featureId >= 0) {
|
||||
|
|
@ -504,9 +510,9 @@ export default class Layer extends Base {
|
|||
const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
|
||||
const color = style.color;
|
||||
const colorAttr = this.layerMesh.geometry.attributes.a_color;
|
||||
const firstId = pickingId.indexOf(featureStyleId[0] + 1);
|
||||
const firstId = pickingId.indexOf(featureStyleId[0]);
|
||||
for (let i = firstId; i < pickingId.length; i++) {
|
||||
if (pickingId[i] === featureStyleId[0] + 1) {
|
||||
if (pickingId[i] === featureStyleId[0]) {
|
||||
colorAttr.array[i * 4 + 0] = color[0];
|
||||
colorAttr.array[i * 4 + 1] = color[1];
|
||||
colorAttr.array[i * 4 + 2] = color[2];
|
||||
|
|
@ -578,14 +584,14 @@ export default class Layer extends Base {
|
|||
* 重置高亮要素
|
||||
*/
|
||||
_resetStyle() {
|
||||
|
||||
const pickingId = this.layerMesh.geometry.attributes.pickingId.array;
|
||||
const colorAttr = this.layerMesh.geometry.attributes.a_color;
|
||||
this._activeIds.forEach(index => {
|
||||
const color = this.layerData[index].color;
|
||||
const firstId = pickingId.indexOf(index + 1);
|
||||
const selectFeatureIndexId = this.layerSource.getSeletFeatureIndex(index);
|
||||
const color = this.layerData[selectFeatureIndexId].color;
|
||||
const firstId = pickingId.indexOf(index);
|
||||
for (let i = firstId; i < pickingId.length; i++) {
|
||||
if (pickingId[i] === index + 1) {
|
||||
if (pickingId[i] === index) {
|
||||
colorAttr.array[i * 4 + 0] = color[0];
|
||||
colorAttr.array[i * 4 + 1] = color[1];
|
||||
colorAttr.array[i * 4 + 2] = color[2];
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
import Base from './base';
|
||||
import Controller from './controller/index';
|
||||
import { getTransform, getParser } from '../source';
|
||||
import { extent } from '../util/geo';
|
||||
import { getMap } from '../map/index';
|
||||
export default class Source extends Base {
|
||||
getDefaultCfg() {
|
||||
|
|
@ -10,8 +10,7 @@ export default class Source extends Base {
|
|||
defs: {},
|
||||
parser: {},
|
||||
transforms: [],
|
||||
scales: {
|
||||
},
|
||||
scales: {},
|
||||
options: {}
|
||||
};
|
||||
}
|
||||
|
|
@ -32,6 +31,7 @@ export default class Source extends Base {
|
|||
const { type = 'geojson' } = parser;
|
||||
const data = this.get('data');
|
||||
this.data = getParser(type)(data, parser);
|
||||
this.data.extent = extent(this.data.dataArray);
|
||||
}
|
||||
/**
|
||||
* 数据统计
|
||||
|
|
@ -40,7 +40,8 @@ export default class Source extends Base {
|
|||
const trans = this._transforms;
|
||||
trans.forEach(tran => {
|
||||
const { type } = tran;
|
||||
this.data = getTransform(type)(this.data, tran);
|
||||
const data = getTransform(type)(this.data, tran);
|
||||
Object.assign(this.data, data);
|
||||
});
|
||||
this._transforms = trans;
|
||||
}
|
||||
|
|
@ -81,7 +82,6 @@ export default class Source extends Base {
|
|||
return geo;
|
||||
}
|
||||
_coordProject(geo) {
|
||||
|
||||
if (Array.isArray(geo[0][0])) {
|
||||
return geo.map(coor => {
|
||||
return this._coordProject(coor);
|
||||
|
|
@ -89,22 +89,36 @@ export default class Source extends Base {
|
|||
}
|
||||
if (!Array.isArray(geo[0])) {
|
||||
return this._coorConvert(geo);
|
||||
|
||||
}
|
||||
return geo.map(coor => {
|
||||
return this._coorConvert(coor);
|
||||
});
|
||||
}
|
||||
_coorConvert(geo) {
|
||||
|
||||
const ll = this.projectFlat(geo);
|
||||
return [ ll.x, ll.y, geo[2] || 0 ];
|
||||
|
||||
}
|
||||
getSelectFeature(featureId) {
|
||||
const data = this.get('data');
|
||||
// 如果是GeoJSON 数据返回原数
|
||||
return data.features ? data.features[featureId] : this.data.dataArray[featureId];
|
||||
// 颜色编码从1开始，要素索引从0开始，所以颜色转变要素需要减1
|
||||
return data.features
|
||||
? data.features[featureId - 1]
|
||||
: this.data.dataArray[featureId - 1];
|
||||
}
|
||||
getSeletFeatureIndex(featureId) {
|
||||
const data = this.get('data');
|
||||
if (!data.features) {
|
||||
return featureId - 1;
|
||||
}
|
||||
let featureIndex = 0;
|
||||
for (let i = 0; i < this.data.dataArray.length; i++) {
|
||||
const item = this.data.dataArray[i];
|
||||
if (item._id === featureId) {
|
||||
break;
|
||||
}
|
||||
featureIndex++;
|
||||
}
|
||||
return featureIndex;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
precision highp float;
|
||||
attribute float pickingId;
|
||||
attribute vec4 a_color;
|
||||
attribute float a_size;
|
||||
attribute float a_shape;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
vec4 id_topickColor(float pickingId) {
|
||||
float id = step(0.,pickingId) * pickingId;
|
||||
vec3 a = fract(vec3(1.0/255.0, 1.0/(255.0*255.0), 1.0/(255.0*255.0*255.0)) * id);
|
||||
a -= a.xxy * vec3(0.0, 1.0/255.0, 1.0/255.0);
|
||||
vec4 worldId = vec4(a,1);
|
||||
return worldId
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ export default class GaodeMap extends Base {
|
|||
let d = Math.PI / 180;
|
||||
let x = lnglat[0] * d;
|
||||
let y = lat * d;
|
||||
y = Math.log(Math.tan((Math.PI / 4) + (y / 2)));
|
||||
y = Math.log(Math.tan(Math.PI / 4 + y / 2));
|
||||
const a = 0.5 / Math.PI,
|
||||
b = 0.5,
|
||||
c = -0.5 / Math.PI;
|
||||
|
|
@ -34,14 +34,13 @@ export default class GaodeMap extends Base {
|
|||
setTimeout(() => {
|
||||
this.emit('mapLoad');
|
||||
}, 100);
|
||||
|
||||
}
|
||||
|
||||
initMap() {
|
||||
const mapStyle = this.get('mapStyle');
|
||||
|
||||
switch (mapStyle) {
|
||||
case 'dark' :
|
||||
case 'dark':
|
||||
this.set('mapStyle', Theme.DarkTheme.mapStyle);
|
||||
break;
|
||||
case 'light':
|
||||
|
|
@ -52,7 +51,6 @@ export default class GaodeMap extends Base {
|
|||
}
|
||||
this.set('zooms', [ this.get('minZoom'), this.get('maxZoom') ]);
|
||||
this.map = new AMap.Map(this.container, this._attrs);
|
||||
|
||||
}
|
||||
asyncCamera(engine) {
|
||||
this._engine = engine;
|
||||
|
|
@ -64,7 +62,7 @@ export default class GaodeMap extends Base {
|
|||
let { fov, near, far, height, pitch, rotation, aspect } = mapCamera;
|
||||
pitch *= DEG2RAD;
|
||||
rotation *= DEG2RAD;
|
||||
camera.fov = 180 * fov / Math.PI;
|
||||
camera.fov = (180 * fov) / Math.PI;
|
||||
camera.aspect = aspect;
|
||||
camera.near = near;
|
||||
camera.far = far;
|
||||
|
|
@ -97,32 +95,78 @@ export default class GaodeMap extends Base {
|
|||
const canvasContainer = document.getElementById(this.container);
|
||||
this.canvasContainer = canvasContainer;
|
||||
this.renderDom = document.createElement('div');
|
||||
this.renderDom.style.cssText += 'position: absolute;top: 0; z-index:1;height: 100%;width: 100%;pointer-events: none;';
|
||||
this.renderDom.style.cssText +=
|
||||
'position: absolute;top: 0; z-index:1;height: 100%;width: 100%;pointer-events: none;';
|
||||
this.renderDom.id = 'l7_canvaslayer';
|
||||
canvasContainer.appendChild(this.renderDom);
|
||||
}
|
||||
mixMap(scene) {
|
||||
const map = this.map;
|
||||
scene.getZoom = () => { return map.getZoom(); };
|
||||
scene.getCenter = () => { return map.getCenter(); };
|
||||
scene.getSize = () => { return map.getSize(); };
|
||||
scene.getPitch = () => { return map.getPitch(); };
|
||||
scene.getRotation = () => { return map.getRotation(); };
|
||||
scene.getStatus = () => { return map.getStatus(); };
|
||||
scene.getScale = () => { return map.getScale(); };
|
||||
scene.getZoom = () => { return map.getZoom(); };
|
||||
scene.setZoom = () => { return map.setZoom(); };
|
||||
scene.setBounds = () => { return map.setBounds(); };
|
||||
scene.setRotation = () => { return map.setRotation(); };
|
||||
scene.zoomIn = () => { return map.zoomIn(); };
|
||||
scene.setRotation = () => { return map.setRotation(); };
|
||||
scene.zoomOut = () => { return map.zoomOut(); };
|
||||
scene.panTo = () => { return map.panTo(); };
|
||||
scene.panBy = () => { return map.panBy(); };
|
||||
scene.setPitch = () => { return map.setPitch(); };
|
||||
scene.pixelToLngLat = () => { return map.pixelToLngLat(); };
|
||||
scene.lngLatToPixel = () => { return map.lngLatToPixel(); };
|
||||
scene.setMapStyle = () => { return map.setMapStyle(); };
|
||||
scene.getZoom = () => {
|
||||
return map.getZoom();
|
||||
};
|
||||
scene.getCenter = () => {
|
||||
return map.getCenter();
|
||||
};
|
||||
scene.getSize = () => {
|
||||
return map.getSize();
|
||||
};
|
||||
scene.getPitch = () => {
|
||||
return map.getPitch();
|
||||
};
|
||||
scene.getRotation = () => {
|
||||
return map.getRotation();
|
||||
};
|
||||
scene.getStatus = () => {
|
||||
return map.getStatus();
|
||||
};
|
||||
scene.getScale = () => {
|
||||
return map.getScale();
|
||||
};
|
||||
scene.getZoom = () => {
|
||||
return map.getZoom();
|
||||
};
|
||||
scene.setZoom = () => {
|
||||
return map.setZoom();
|
||||
};
|
||||
scene.setBounds = () => {
|
||||
return map.setBounds();
|
||||
};
|
||||
scene.setRotation = () => {
|
||||
return map.setRotation();
|
||||
};
|
||||
scene.zoomIn = () => {
|
||||
return map.zoomIn();
|
||||
};
|
||||
scene.setRotation = () => {
|
||||
return map.setRotation();
|
||||
};
|
||||
scene.zoomOut = () => {
|
||||
return map.zoomOut();
|
||||
};
|
||||
scene.panTo = () => {
|
||||
return map.panTo();
|
||||
};
|
||||
scene.panBy = () => {
|
||||
return map.panBy();
|
||||
};
|
||||
scene.setPitch = () => {
|
||||
return map.setPitch();
|
||||
};
|
||||
scene.pixelToLngLat = () => {
|
||||
return map.pixelToLngLat();
|
||||
};
|
||||
scene.lngLatToPixel = () => {
|
||||
return map.lngLatToPixel();
|
||||
};
|
||||
scene.setMapStyle = () => {
|
||||
return map.setMapStyle();
|
||||
};
|
||||
scene.fitBounds = extent => {
|
||||
return map.setBounds(
|
||||
new AMap.Bounds([ extent[0], extent[1] ], [ extent[2], extent[3] ])
|
||||
);
|
||||
};
|
||||
scene.containerToLngLat = pixel => {
|
||||
const ll = new AMap.Pixel(pixel.x, pixel.y);
|
||||
return map.containerToLngLat(ll);
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
export default class GaodeMap {
|
||||
constructor(map) {
|
||||
this.map = map;
|
||||
}
|
||||
getZoom() {
|
||||
return this.map.getZoom();
|
||||
}
|
||||
getCenter() {
|
||||
return this.map.getCenter();
|
||||
}
|
||||
getSize() {
|
||||
return this.map.getSize();
|
||||
}
|
||||
getPitch() {
|
||||
return this.map.getPitch();
|
||||
}
|
||||
getRotation() {
|
||||
return this.map.getRotation();
|
||||
}
|
||||
getStatus() {
|
||||
return this.map.getStatus();
|
||||
}
|
||||
getScale() {
|
||||
return this.map.getScale();
|
||||
}
|
||||
setZoom(zoom) {
|
||||
return this.map.setZoom(zoom);
|
||||
}
|
||||
setCenter(lnglat) {
|
||||
return this.map.setCenter(lnglat);
|
||||
}
|
||||
setBounds(bounds) {
|
||||
return this.map.setBounds(bounds);
|
||||
}
|
||||
setRotation(rotation) {
|
||||
return this.map.setRotation(rotation);
|
||||
}
|
||||
zoomIn() {
|
||||
return this.map.zoomIn();
|
||||
}
|
||||
zoomOut() {
|
||||
return this.map.zoomOut();
|
||||
}
|
||||
panTo(lngLat) {
|
||||
return this.map.panTo(lngLat);
|
||||
}
|
||||
panBy(x, y) {
|
||||
return this.map.panBy(x, y);
|
||||
}
|
||||
setPitch(pitch) {
|
||||
return this.map.setPitch(pitch);
|
||||
}
|
||||
pixelToLngLat(lngLat, level) {
|
||||
return this.map.pixelToLngLat(lngLat, level);
|
||||
}
|
||||
lngLatToPixel(lngLat, level) {
|
||||
return this.map.lnglatToPixel(lngLat, level);
|
||||
|
||||
}
|
||||
containerToLngLat(pixel) {
|
||||
const ll = new AMap.Pixel(pixel.x, pixel.y);
|
||||
return this.map.containerToLngLat(ll);
|
||||
}
|
||||
setMapStyle(style) {
|
||||
return this.map.setMapStyle(style);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -5,9 +5,9 @@ export default function csv(data, cfg) {
|
|||
const resultdata = [];
|
||||
csvdata.forEach((col, featureIndex) => {
|
||||
let coordinates = [];
|
||||
if (x && y) { coordinates = [ col[x], col[y] ]; } // 点数据
|
||||
if (x && y) { coordinates = [ col[x] * 1, col[y] * 1 ]; } // 点数据
|
||||
if (x1 && y1) { // 弧线 或者线段
|
||||
coordinates = [[ col[x], col[y] ], [ col[x1], col[y1] ]];
|
||||
coordinates = [[ col[x] * 1, col[y] * 1 ], [ col[x1] * 1, col[y1] * 1 ]];
|
||||
}
|
||||
col._id = featureIndex + 1;
|
||||
const dataItem = {
|
||||
|
|
|
|||
22
src/track.js
22
src/track.js
|
|
@ -1,22 +0,0 @@
|
|||
/**
|
||||
* @fileOverview track g2
|
||||
* @author dxq613@gmail.com
|
||||
*/
|
||||
import Global from './global';
|
||||
const SERVER_URL = 'https://kcart.alipay.com/web/bi.do';
|
||||
|
||||
// 延迟发送请求
|
||||
setTimeout(function() {
|
||||
if (Global.trackable) {
|
||||
const image = new Image();
|
||||
const newObj = {
|
||||
pg: document.URL,
|
||||
r: new Date().getTime(),
|
||||
l7: true,
|
||||
version: Global.version,
|
||||
page_type: 'syslog'
|
||||
};
|
||||
const d = encodeURIComponent(JSON.stringify([ newObj ]));
|
||||
image.src = `${SERVER_URL}?BIProfile=merge&d=${d}`;
|
||||
}
|
||||
}, 3000);
|
||||
33
src/util.js
33
src/util.js
|
|
@ -1,8 +1,3 @@
|
|||
/**
|
||||
* @fileOverview The util method based on the lodash.
|
||||
* @author dxq613@gmail.com
|
||||
* @see https://github.com/lodash/lodash
|
||||
*/
|
||||
import Utils from '@antv/util';
|
||||
|
||||
const Util = Utils.mix({}, Utils, {
|
||||
|
|
@ -13,33 +8,7 @@ const Util = Utils.mix({}, Utils, {
|
|||
isNaN,
|
||||
snapEqual: Utils.isNumberEqual,
|
||||
remove: Utils.pull,
|
||||
inArray: Utils.contains,
|
||||
/**
|
||||
* 将用户输入的 padding 转换成 [top, right, bottom, right] 的模式
|
||||
* @param {Number|Array} padding 输入的padding
|
||||
* @return {Array} 四个padding 值
|
||||
*/
|
||||
toAllPadding(padding) {
|
||||
let top = 0;
|
||||
let left = 0;
|
||||
let right = 0;
|
||||
let bottom = 0;
|
||||
|
||||
if (Util.isNumber(padding) || Util.isString(padding)) {
|
||||
top = left = right = bottom = padding;
|
||||
} else if (Util.isArray(padding)) {
|
||||
top = padding[0];
|
||||
right = !Util.isNil(padding[1]) ? padding[1] : padding[0];
|
||||
bottom = !Util.isNil(padding[2]) ? padding[2] : padding[0];
|
||||
left = !Util.isNil(padding[3]) ? padding[3] : right;
|
||||
} else if (Util.isObject(padding)) {
|
||||
top = padding.top || 0;
|
||||
right = padding.right || 0;
|
||||
bottom = padding.bottom || 0;
|
||||
left = padding.left || 0;
|
||||
}
|
||||
return [ top, right, bottom, left ];
|
||||
}
|
||||
inArray: Utils.contains
|
||||
});
|
||||
|
||||
Util.Array = {
|
||||
|
|
|
|||
|
|
@ -1,115 +0,0 @@
|
|||
const PRECISION = 0.00001; // 常量，据的精度，小于这个精度认为是0
|
||||
const RADIAN = Math.PI / 180;
|
||||
const DEGREE = 180 / Math.PI;
|
||||
|
||||
export default {
|
||||
isFunction: require('lodash/isFunction'),
|
||||
isObject: require('lodash/isObject'),
|
||||
isBoolean: require('lodash/isBoolean'),
|
||||
isNil: require('lodash/isNil'),
|
||||
isString: require('lodash/isString'),
|
||||
isArray: require('lodash/isArray'),
|
||||
isNumber: require('lodash/isNumber'),
|
||||
isEmpty: require('lodash/isEmpty'), // isBlank
|
||||
uniqueId: require('lodash/uniqueId'),
|
||||
clone: require('lodash/clone'),
|
||||
assign: require('lodash/assign'), // simpleMix
|
||||
merge: require('lodash/merge'), // mix
|
||||
upperFirst: require('lodash/upperFirst'), // ucfirst
|
||||
remove: require('lodash/pull'),
|
||||
each: require('lodash/forEach'),
|
||||
isEqual: require('lodash/isEqual'),
|
||||
toArray: require('lodash/toArray'),
|
||||
extend(subclass, superclass, overrides, staticOverrides) {
|
||||
// 如果只提供父类构造函数，则自动生成子类构造函数
|
||||
if (!this.isFunction(superclass)) {
|
||||
overrides = superclass;
|
||||
superclass = subclass;
|
||||
subclass = function() {};
|
||||
}
|
||||
|
||||
const create = Object.create ?
|
||||
function(proto, c) {
|
||||
return Object.create(proto, {
|
||||
constructor: {
|
||||
value: c
|
||||
}
|
||||
});
|
||||
} :
|
||||
function(proto, c) {
|
||||
function F() {}
|
||||
|
||||
F.prototype = proto;
|
||||
const o = new F();
|
||||
o.constructor = c;
|
||||
return o;
|
||||
};
|
||||
|
||||
const superObj = create(superclass.prototype, subclass); // new superclass(),//实例化父类作为子类的prototype
|
||||
subclass.prototype = this.merge(superObj, subclass.prototype); // 指定子类的prototype
|
||||
subclass.superclass = create(superclass.prototype, superclass);
|
||||
this.merge(superObj, overrides);
|
||||
this.merge(subclass, staticOverrides);
|
||||
return subclass;
|
||||
},
|
||||
augment(c) {
|
||||
const args = this.toArray(arguments);
|
||||
for (let i = 1; i < args.length; i++) {
|
||||
let obj = args[i];
|
||||
if (this.isFunction(obj)) {
|
||||
obj = obj.prototype;
|
||||
}
|
||||
this.merge(c.prototype, obj);
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 判断两个数是否相等
|
||||
* @param {Number} a 数
|
||||
* @param {Number} b 数
|
||||
* @return {Boolean} 是否相等
|
||||
**/
|
||||
isNumberEqual(a, b) {
|
||||
return Math.abs((a - b)) < PRECISION;
|
||||
},
|
||||
/**
|
||||
* 获取角度对应的弧度
|
||||
* @param {Number} degree 角度
|
||||
* @return {Number} 弧度
|
||||
**/
|
||||
toRadian(degree) {
|
||||
return RADIAN * degree;
|
||||
},
|
||||
/**
|
||||
* 获取弧度对应的角度
|
||||
* @param {Number} radian 弧度
|
||||
* @return {Number} 角度
|
||||
**/
|
||||
toDegree(radian) {
|
||||
return DEGREE * radian;
|
||||
},
|
||||
/**
|
||||
* 广义取模运算
|
||||
* @param {Number} n 被取模的值
|
||||
* @param {Number} m 模
|
||||
* @return {Number} 返回n 被 m 取模的结果
|
||||
*/
|
||||
mod(n, m) {
|
||||
return ((n % m) + m) % m;
|
||||
},
|
||||
/**
|
||||
* 把a夹在min，max中间, 低于min的返回min，高于max的返回max，否则返回自身
|
||||
* @param {Number} a 数
|
||||
* @param {Number} min 下限
|
||||
* @param {Number} max 上限
|
||||
* @return {Number} 返回结果值
|
||||
**/
|
||||
clamp(a, min, max) {
|
||||
if (a < min) {
|
||||
return min;
|
||||
} else if (a > max) {
|
||||
return max;
|
||||
}
|
||||
|
||||
return a;
|
||||
}
|
||||
};
|
||||
168
src/util/dom.js
168
src/util/dom.js
|
|
@ -1,168 +0,0 @@
|
|||
import Util from './common';
|
||||
|
||||
const TABLE = document.createElement('table');
|
||||
const TABLE_TR = document.createElement('tr');
|
||||
const FRAGMENT_REG = /^\s*<(\w+|!)[^>]*>/;
|
||||
const CONTAINERS = {
|
||||
tr: document.createElement('tbody'),
|
||||
tbody: TABLE,
|
||||
thead: TABLE,
|
||||
tfoot: TABLE,
|
||||
td: TABLE_TR,
|
||||
th: TABLE_TR,
|
||||
'*': document.createElement('div')
|
||||
};
|
||||
|
||||
export default {
|
||||
getBoundingClientRect(node, defaultValue) {
|
||||
if (node && node.getBoundingClientRect) {
|
||||
const rect = node.getBoundingClientRect();
|
||||
const top = document.documentElement.clientTop;
|
||||
const left = document.documentElement.clientLeft;
|
||||
return {
|
||||
top: rect.top - top,
|
||||
bottom: rect.bottom - top,
|
||||
left: rect.left - left,
|
||||
right: rect.right - left
|
||||
};
|
||||
}
|
||||
return defaultValue || null;
|
||||
},
|
||||
/**
|
||||
* 获取样式
|
||||
* @param {Object} dom DOM节点
|
||||
* @param {String} name 样式名
|
||||
* @param {Any} defaultValue 默认值
|
||||
* @return {String} 属性值
|
||||
*/
|
||||
getStyle(dom, name, defaultValue) {
|
||||
try {
|
||||
if (window.getComputedStyle) {
|
||||
return window.getComputedStyle(dom, null)[name];
|
||||
}
|
||||
return dom.currentStyle[name];
|
||||
} catch (e) {
|
||||
if (!Util.isNil(defaultValue)) {
|
||||
return defaultValue;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
},
|
||||
modifyCSS(dom, css) {
|
||||
if (dom) {
|
||||
for (const key in css) {
|
||||
if (css.hasOwnProperty(key)) {
|
||||
dom.style[key] = css[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
return dom;
|
||||
},
|
||||
/**
|
||||
* 创建DOM 节点
|
||||
* @param {String} str Dom 字符串
|
||||
* @return {HTMLElement} DOM 节点
|
||||
*/
|
||||
createDom(str) {
|
||||
let name = FRAGMENT_REG.test(str) && RegExp.$1;
|
||||
if (!(name in CONTAINERS)) {
|
||||
name = '*';
|
||||
}
|
||||
const container = CONTAINERS[name];
|
||||
str = str.replace(/(^\s*)|(\s*$)/g, '');
|
||||
container.innerHTML = '' + str;
|
||||
const dom = container.childNodes[0];
|
||||
container.removeChild(dom);
|
||||
return dom;
|
||||
},
|
||||
getRatio() {
|
||||
return window.devicePixelRatio ? window.devicePixelRatio : 2;
|
||||
},
|
||||
/**
|
||||
* 获取宽度
|
||||
* @param {HTMLElement} el dom节点
|
||||
* @param {Number} defaultValue 默认值
|
||||
* @return {Number} 宽度
|
||||
*/
|
||||
getWidth(el, defaultValue) {
|
||||
let width = this.getStyle(el, 'width', defaultValue);
|
||||
if (width === 'auto') {
|
||||
width = el.offsetWidth;
|
||||
}
|
||||
return parseFloat(width);
|
||||
},
|
||||
/**
|
||||
* 获取高度
|
||||
* @param {HTMLElement} el dom节点
|
||||
* @param {Number} defaultValue 默认值
|
||||
* @return {Number} 高度
|
||||
*/
|
||||
getHeight(el, defaultValue) {
|
||||
let height = this.getStyle(el, 'height', defaultValue);
|
||||
if (height === 'auto') {
|
||||
height = el.offsetHeight;
|
||||
}
|
||||
return parseFloat(height);
|
||||
},
|
||||
/**
|
||||
* 获取外层高度
|
||||
* @param {HTMLElement} el dom节点
|
||||
* @param {Number} defaultValue 默认值
|
||||
* @return {Number} 高度
|
||||
*/
|
||||
getOuterHeight(el, defaultValue) {
|
||||
const height = this.getHeight(el, defaultValue);
|
||||
const bTop = parseFloat(this.getStyle(el, 'borderTopWidth')) || 0;
|
||||
const pTop = parseFloat(this.getStyle(el, 'paddingTop')) || 0;
|
||||
const pBottom = parseFloat(this.getStyle(el, 'paddingBottom')) || 0;
|
||||
const bBottom = parseFloat(this.getStyle(el, 'borderBottomWidth')) || 0;
|
||||
return height + bTop + bBottom + pTop + pBottom;
|
||||
},
|
||||
/**
|
||||
* 获取外层宽度
|
||||
* @param {HTMLElement} el dom节点
|
||||
* @param {Number} defaultValue 默认值
|
||||
* @return {Number} 宽度
|
||||
*/
|
||||
getOuterWidth(el, defaultValue) {
|
||||
const width = this.getWidth(el, defaultValue);
|
||||
const bLeft = parseFloat(this.getStyle(el, 'borderLeftWidth')) || 0;
|
||||
const pLeft = parseFloat(this.getStyle(el, 'paddingLeft')) || 0;
|
||||
const pRight = parseFloat(this.getStyle(el, 'paddingRight')) || 0;
|
||||
const bRight = parseFloat(this.getStyle(el, 'borderRightWidth')) || 0;
|
||||
return width + bLeft + bRight + pLeft + pRight;
|
||||
},
|
||||
/**
|
||||
* 添加事件监听器
|
||||
* @param {Object} target DOM对象
|
||||
* @param {String} eventType 事件名
|
||||
* @param {Funtion} callback 回调函数
|
||||
* @return {Object} 返回对象
|
||||
*/
|
||||
addEventListener(target, eventType, callback) {
|
||||
if (target) {
|
||||
if (target.addEventListener) {
|
||||
target.addEventListener(eventType, callback, false);
|
||||
return {
|
||||
remove() {
|
||||
target.removeEventListener(eventType, callback, false);
|
||||
}
|
||||
};
|
||||
} else if (target.attachEvent) {
|
||||
target.attachEvent('on' + eventType, callback);
|
||||
return {
|
||||
remove() {
|
||||
target.detachEvent('on' + eventType, callback);
|
||||
}
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
requestAnimationFrame(fn) {
|
||||
const method = window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(fn) {
|
||||
return setTimeout(fn, 16);
|
||||
};
|
||||
|
||||
return method(fn);
|
||||
}
|
||||
};
|
||||
|
|
@ -1,201 +0,0 @@
|
|||
import Util from '../util/index';
|
||||
|
||||
const regexTags = /[MLHVQTCSAZ]([^MLHVQTCSAZ]*)/ig;
|
||||
const regexDot = /[^\s\,]+/ig;
|
||||
const regexLG = /^l\s*\(\s*([\d.]+)\s*\)\s*(.*)/i;
|
||||
const regexRG = /^r\s*\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)\s*(.*)/i;
|
||||
const regexPR = /^p\s*\(\s*([axyn])\s*\)\s*(.*)/i;
|
||||
const regexColorStop = /[\d.]+:(#[^\s]+|[^\)]+\))/ig;
|
||||
const numColorCache = {};
|
||||
|
||||
function addStop(steps, gradient) {
|
||||
const arr = steps.match(regexColorStop);
|
||||
Util.each(arr, function(item) {
|
||||
item = item.split(':');
|
||||
gradient.addColorStop(item[0], item[1]);
|
||||
});
|
||||
}
|
||||
|
||||
function parseLineGradient(color, self) {
|
||||
const arr = regexLG.exec(color);
|
||||
const angle = Util.mod(Util.toRadian(parseFloat(arr[1])), Math.PI * 2);
|
||||
const steps = arr[2];
|
||||
const box = self.getBBox();
|
||||
let start;
|
||||
let end;
|
||||
|
||||
if (angle >= 0 && angle < 0.5 * Math.PI) {
|
||||
start = {
|
||||
x: box.minX,
|
||||
y: box.minY
|
||||
};
|
||||
end = {
|
||||
x: box.maxX,
|
||||
y: box.maxY
|
||||
};
|
||||
} else if (0.5 * Math.PI <= angle && angle < Math.PI) {
|
||||
start = {
|
||||
x: box.maxX,
|
||||
y: box.minY
|
||||
};
|
||||
end = {
|
||||
x: box.minX,
|
||||
y: box.maxY
|
||||
};
|
||||
} else if (Math.PI <= angle && angle < 1.5 * Math.PI) {
|
||||
start = {
|
||||
x: box.maxX,
|
||||
y: box.maxY
|
||||
};
|
||||
end = {
|
||||
x: box.minX,
|
||||
y: box.minY
|
||||
};
|
||||
} else {
|
||||
start = {
|
||||
x: box.minX,
|
||||
y: box.maxY
|
||||
};
|
||||
end = {
|
||||
x: box.maxX,
|
||||
y: box.minY
|
||||
};
|
||||
}
|
||||
|
||||
const tanTheta = Math.tan(angle);
|
||||
const tanTheta2 = tanTheta * tanTheta;
|
||||
|
||||
const x = ((end.x - start.x) + tanTheta * (end.y - start.y)) / (tanTheta2 + 1) + start.x;
|
||||
const y = tanTheta * ((end.x - start.x) + tanTheta * (end.y - start.y)) / (tanTheta2 + 1) + start.y;
|
||||
const context = self.get('context');
|
||||
const gradient = context.createLinearGradient(start.x, start.y, x, y);
|
||||
addStop(steps, gradient);
|
||||
return gradient;
|
||||
}
|
||||
|
||||
function parseRadialGradient(color, self) {
|
||||
const arr = regexRG.exec(color);
|
||||
const fx = parseFloat(arr[1]);
|
||||
const fy = parseFloat(arr[2]);
|
||||
const fr = parseFloat(arr[3]);
|
||||
const steps = arr[4];
|
||||
const box = self.getBBox();
|
||||
const context = self.get('context');
|
||||
const width = box.maxX - box.minX;
|
||||
const height = box.maxY - box.minY;
|
||||
const r = Math.sqrt(width * width + height * height) / 2;
|
||||
const gradient = context.createRadialGradient(box.minX + width * fx, box.minY + height * fy, fr * r, box.minX + width / 2, box.minY + height / 2, r);
|
||||
addStop(steps, gradient);
|
||||
return gradient;
|
||||
}
|
||||
|
||||
function parsePattern(color, self) {
|
||||
if (self.get('patternSource') && self.get('patternSource') === color) {
|
||||
return self.get('pattern');
|
||||
}
|
||||
let pattern;
|
||||
let img;
|
||||
const arr = regexPR.exec(color);
|
||||
let repeat = arr[1];
|
||||
const source = arr[2];
|
||||
|
||||
// Function to be called when pattern loads
|
||||
function onload() {
|
||||
// Create pattern
|
||||
const context = self.get('context');
|
||||
pattern = context.createPattern(img, repeat);
|
||||
self.setSilent('pattern', pattern); // be a cache
|
||||
self.setSilent('patternSource', color);
|
||||
}
|
||||
|
||||
switch (repeat) {
|
||||
case 'a':
|
||||
repeat = 'repeat';
|
||||
break;
|
||||
case 'x':
|
||||
repeat = 'repeat-x';
|
||||
break;
|
||||
case 'y':
|
||||
repeat = 'repeat-y';
|
||||
break;
|
||||
case 'n':
|
||||
repeat = 'no-repeat';
|
||||
break;
|
||||
default:
|
||||
repeat = 'no-repeat';
|
||||
}
|
||||
|
||||
img = new Image();
|
||||
// If source URL is not a data URL
|
||||
if (!source.match(/^data:/i)) {
|
||||
// Set crossOrigin for this image
|
||||
img.crossOrigin = 'Anonymous';
|
||||
}
|
||||
img.src = source;
|
||||
|
||||
if (img.complete) {
|
||||
onload();
|
||||
} else {
|
||||
img.onload = onload;
|
||||
// Fix onload() bug in IE9
|
||||
// eslint-disable-next-line
|
||||
img.src = img.src;
|
||||
}
|
||||
|
||||
return pattern;
|
||||
}
|
||||
|
||||
export default {
|
||||
parsePath(path) {
|
||||
path = path || [];
|
||||
if (Util.isArray(path)) {
|
||||
return path;
|
||||
}
|
||||
|
||||
if (Util.isString(path)) {
|
||||
path = path.match(regexTags);
|
||||
Util.each(path, function(item, index) {
|
||||
item = item.match(regexDot);
|
||||
if (item[0].length > 1) {
|
||||
const tag = item[0].charAt(0);
|
||||
item.splice(1, 0, item[0].substr(1));
|
||||
item[0] = tag;
|
||||
}
|
||||
Util.each(item, function(sub, i) {
|
||||
if (!isNaN(sub)) {
|
||||
item[i] = +sub;
|
||||
}
|
||||
});
|
||||
path[index] = item;
|
||||
});
|
||||
return path;
|
||||
}
|
||||
},
|
||||
parseStyle(color, self) {
|
||||
if (Util.isString(color)) {
|
||||
if (color[1] === '(' || color[2] === '(') {
|
||||
if (color[0] === 'l') { // regexLG.test(color)
|
||||
return parseLineGradient(color, self);
|
||||
} else if (color[0] === 'r') { // regexRG.test(color)
|
||||
return parseRadialGradient(color, self);
|
||||
} else if (color[0] === 'p') { // regexPR.test(color)
|
||||
return parsePattern(color, self);
|
||||
}
|
||||
}
|
||||
return color;
|
||||
}
|
||||
},
|
||||
numberToColor(num) {
|
||||
// 增加缓存
|
||||
let color = numColorCache[num];
|
||||
if (!color) {
|
||||
let str = num.toString(16);
|
||||
for (let i = str.length; i < 6; i++) {
|
||||
str = '0' + str;
|
||||
}
|
||||
color = '#' + str;
|
||||
numColorCache[num] = color;
|
||||
}
|
||||
return color;
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
/**
|
||||
* 计算地理数据范围
|
||||
* @param {dataArray} data 地理坐标数据
|
||||
* @return {Array} extent
|
||||
*/
|
||||
export function extent(data) {
|
||||
const extent = [ Infinity, Infinity, -Infinity, -Infinity ];
|
||||
data.forEach(item => {
|
||||
const { coordinates } = item;
|
||||
calcExtent(extent, coordinates);
|
||||
});
|
||||
return extent;
|
||||
}
|
||||
function calcExtent(extent, coords) {
|
||||
coords.forEach(coord => {
|
||||
if (Array.isArray(coord[0])) {
|
||||
calcExtent(extent, coord);
|
||||
} else {
|
||||
if (extent[0] > coord[0]) extent[0] = coord[0];
|
||||
if (extent[1] > coord[1]) extent[1] = coord[1];
|
||||
if (extent[2] < coord[0]) extent[2] = coord[0];
|
||||
if (extent[3] < coord[1]) extent[3] = coord[1];
|
||||
}
|
||||
});
|
||||
return extent;
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
export default function loadCSS(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const style = document.createElement('style');
|
||||
style.textContent = '@import "' + url + '"';
|
||||
|
||||
const fi = setInterval(function() {
|
||||
try {
|
||||
// Only populated when file is loaded
|
||||
if (style.sheet.cssRules) {
|
||||
clearInterval(fi);
|
||||
resolve();
|
||||
}
|
||||
} catch (e) {
|
||||
throw e;
|
||||
}
|
||||
}, 10);
|
||||
|
||||
document.head.appendChild(style);
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
/*
|
||||
* @Author: ThinkGIS
|
||||
* @Date: 2018-06-07 14:05:12
|
||||
* @Last Modified by: ThinkGIS
|
||||
* @Last Modified time: 2018-06-08 10:03:32
|
||||
*/
|
||||
|
||||
export default function loadScript(src) {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const script = document.createElement('script');
|
||||
script.src = src;
|
||||
script.onload = resolve;
|
||||
script.onerror = reject;
|
||||
document.head.appendChild(script);
|
||||
} catch (err) {
|
||||
reject(err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -1,91 +0,0 @@
|
|||
import CommonUtil from './common';
|
||||
import mat3 from 'gl-matrix/src/gl-matrix/mat3';
|
||||
import vec3 from 'gl-matrix/src/gl-matrix/vec3';
|
||||
import vec2 from 'gl-matrix/src/gl-matrix/vec2';
|
||||
|
||||
vec2.angle = function(v1, v2) {
|
||||
const theta = vec2.dot(v1, v2) / (vec2.length(v1) * vec2.length(v2));
|
||||
return Math.acos(CommonUtil.clamp(theta, -1, 1));
|
||||
};
|
||||
/**
|
||||
* 向量 v1 到 向量 v2 夹角的方向
|
||||
* @param {Array} v1 向量
|
||||
* @param {Array} v2 向量
|
||||
* @return {Boolean} >= 0 顺时针 < 0 逆时针
|
||||
*/
|
||||
vec2.direction = function(v1, v2) {
|
||||
return v1[0] * v2[1] - v2[0] * v1[1];
|
||||
};
|
||||
vec2.angleTo = function(v1, v2, direct) {
|
||||
const angle = vec2.angle(v1, v2);
|
||||
const angleLargeThanPI = vec2.direction(v1, v2) >= 0;
|
||||
if (direct) {
|
||||
if (angleLargeThanPI) {
|
||||
return Math.PI * 2 - angle;
|
||||
}
|
||||
|
||||
return angle;
|
||||
}
|
||||
|
||||
if (angleLargeThanPI) {
|
||||
return angle;
|
||||
}
|
||||
return Math.PI * 2 - angle;
|
||||
};
|
||||
vec2.vertical = function(out, v, flag) {
|
||||
if (flag) {
|
||||
out[0] = v[1];
|
||||
out[1] = -1 * v[0];
|
||||
} else {
|
||||
out[0] = -1 * v[1];
|
||||
out[1] = v[0];
|
||||
}
|
||||
|
||||
return out;
|
||||
};
|
||||
|
||||
mat3.translate = function(out, a, v) {
|
||||
const transMat = new Array(9);
|
||||
mat3.fromTranslation(transMat, v);
|
||||
return mat3.multiply(out, transMat, a);
|
||||
};
|
||||
|
||||
mat3.rotate = function(out, a, rad) {
|
||||
const rotateMat = new Array(9);
|
||||
mat3.fromRotation(rotateMat, rad);
|
||||
return mat3.multiply(out, rotateMat, a);
|
||||
};
|
||||
|
||||
mat3.scale = function(out, a, v) {
|
||||
const scaleMat = new Array(9);
|
||||
mat3.fromScaling(scaleMat, v);
|
||||
return mat3.multiply(out, scaleMat, a);
|
||||
};
|
||||
|
||||
export default {
|
||||
mat3,
|
||||
vec2,
|
||||
vec3,
|
||||
transform(m, ts) {
|
||||
m = CommonUtil.clone(m);
|
||||
CommonUtil.each(ts, t => {
|
||||
switch (t[0]) {
|
||||
case 't':
|
||||
mat3.translate(m, m, [ t[1], t[2] ]);
|
||||
break;
|
||||
case 's':
|
||||
mat3.scale(m, m, [ t[1], t[2] ]);
|
||||
break;
|
||||
case 'r':
|
||||
mat3.rotate(m, m, t[1]);
|
||||
break;
|
||||
case 'm':
|
||||
mat3.multiply(m, m, t[1]);
|
||||
break;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
});
|
||||
return m;
|
||||
}
|
||||
};
|
||||
965
src/util/path.js
965
src/util/path.js
|
|
@ -1,965 +0,0 @@
|
|||
import Util from './common';
|
||||
const SPACES = '\x09\x0a\x0b\x0c\x0d\x20\xa0\u1680\u180e\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029';
|
||||
const PATH_COMMAND = new RegExp('([a-z])[' + SPACES + ',]*((-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?[' + SPACES + ']*,?[' + SPACES + ']*)+)', 'ig');
|
||||
const PATH_VALUES = new RegExp('(-?\\d*\\.?\\d*(?:e[\\-+]?\\d+)?)[' + SPACES + ']*,?[' + SPACES + ']*', 'ig');
|
||||
|
||||
// Parses given path string into an array of arrays of path segments
|
||||
const parsePathString = function(pathString) {
|
||||
if (!pathString) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (typeof pathString === typeof []) {
|
||||
return pathString;
|
||||
}
|
||||
const paramCounts = {
|
||||
a: 7,
|
||||
c: 6,
|
||||
o: 2,
|
||||
h: 1,
|
||||
l: 2,
|
||||
m: 2,
|
||||
r: 4,
|
||||
q: 4,
|
||||
s: 4,
|
||||
t: 2,
|
||||
v: 1,
|
||||
u: 3,
|
||||
z: 0
|
||||
};
|
||||
const data = [];
|
||||
|
||||
String(pathString).replace(PATH_COMMAND, function(a, b, c) {
|
||||
const params = [];
|
||||
let name = b.toLowerCase();
|
||||
c.replace(PATH_VALUES, function(a, b) {
|
||||
b && params.push(+b);
|
||||
});
|
||||
if (name === 'm' && params.length > 2) {
|
||||
data.push([ b ].concat(params.splice(0, 2)));
|
||||
name = 'l';
|
||||
b = b === 'm' ? 'l' : 'L';
|
||||
}
|
||||
if (name === 'o' && params.length === 1) {
|
||||
data.push([ b, params[0] ]);
|
||||
}
|
||||
if (name === 'r') {
|
||||
data.push([ b ].concat(params));
|
||||
} else {
|
||||
while (params.length >= paramCounts[name]) {
|
||||
data.push([ b ].concat(params.splice(0, paramCounts[name])));
|
||||
if (!paramCounts[name]) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return data;
|
||||
};
|
||||
|
||||
// http://schepers.cc/getting-to-the-point
|
||||
const catmullRom2bezier = function(crp, z) {
|
||||
const d = [];
|
||||
for (let i = 0, iLen = crp.length; iLen - 2 * !z > i; i += 2) {
|
||||
const p = [{
|
||||
x: +crp[i - 2],
|
||||
y: +crp[i - 1]
|
||||
}, {
|
||||
x: +crp[i],
|
||||
y: +crp[i + 1]
|
||||
}, {
|
||||
x: +crp[i + 2],
|
||||
y: +crp[i + 3]
|
||||
}, {
|
||||
x: +crp[i + 4],
|
||||
y: +crp[i + 5]
|
||||
}];
|
||||
if (z) {
|
||||
if (!i) {
|
||||
p[0] = {
|
||||
x: +crp[iLen - 2],
|
||||
y: +crp[iLen - 1]
|
||||
};
|
||||
} else if (iLen - 4 === i) {
|
||||
p[3] = {
|
||||
x: +crp[0],
|
||||
y: +crp[1]
|
||||
};
|
||||
} else if (iLen - 2 === i) {
|
||||
p[2] = {
|
||||
x: +crp[0],
|
||||
y: +crp[1]
|
||||
};
|
||||
p[3] = {
|
||||
x: +crp[2],
|
||||
y: +crp[3]
|
||||
};
|
||||
}
|
||||
} else {
|
||||
if (iLen - 4 === i) {
|
||||
p[3] = p[2];
|
||||
} else if (!i) {
|
||||
p[0] = {
|
||||
x: +crp[i],
|
||||
y: +crp[i + 1]
|
||||
};
|
||||
}
|
||||
}
|
||||
d.push([ 'C',
|
||||
(-p[0].x + 6 * p[1].x + p[2].x) / 6,
|
||||
(-p[0].y + 6 * p[1].y + p[2].y) / 6,
|
||||
(p[1].x + 6 * p[2].x - p[3].x) / 6,
|
||||
(p[1].y + 6 * p[2].y - p[3].y) / 6,
|
||||
p[2].x,
|
||||
p[2].y
|
||||
]);
|
||||
}
|
||||
|
||||
return d;
|
||||
};
|
||||
|
||||
const ellipsePath = function(x, y, rx, ry, a) {
|
||||
let res = [];
|
||||
if (a === null && ry === null) {
|
||||
ry = rx;
|
||||
}
|
||||
x = +x;
|
||||
y = +y;
|
||||
rx = +rx;
|
||||
ry = +ry;
|
||||
if (a !== null) {
|
||||
const rad = Math.PI / 180;
|
||||
const x1 = x + rx * Math.cos(-ry * rad);
|
||||
const x2 = x + rx * Math.cos(-a * rad);
|
||||
const y1 = y + rx * Math.sin(-ry * rad);
|
||||
const y2 = y + rx * Math.sin(-a * rad);
|
||||
res = [
|
||||
[ 'M', x1, y1 ],
|
||||
[ 'A', rx, rx, 0, +(a - ry > 180), 0, x2, y2 ]
|
||||
];
|
||||
} else {
|
||||
res = [
|
||||
[ 'M', x, y ],
|
||||
[ 'm', 0, -ry ],
|
||||
[ 'a', rx, ry, 0, 1, 1, 0, 2 * ry ],
|
||||
[ 'a', rx, ry, 0, 1, 1, 0, -2 * ry ],
|
||||
[ 'z' ]
|
||||
];
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
const pathToAbsolute = function(pathArray) {
|
||||
pathArray = parsePathString(pathArray);
|
||||
|
||||
if (!pathArray || !pathArray.length) {
|
||||
return [
|
||||
[ 'M', 0, 0 ]
|
||||
];
|
||||
}
|
||||
let res = [];
|
||||
let x = 0;
|
||||
let y = 0;
|
||||
let mx = 0;
|
||||
let my = 0;
|
||||
let start = 0;
|
||||
let pa0;
|
||||
let dots;
|
||||
if (pathArray[0][0] === 'M') {
|
||||
x = +pathArray[0][1];
|
||||
y = +pathArray[0][2];
|
||||
mx = x;
|
||||
my = y;
|
||||
start++;
|
||||
res[0] = [ 'M', x, y ];
|
||||
}
|
||||
const crz = pathArray.length === 3 &&
|
||||
pathArray[0][0] === 'M' &&
|
||||
pathArray[1][0].toUpperCase() === 'R' &&
|
||||
pathArray[2][0].toUpperCase() === 'Z';
|
||||
for (let r, pa, i = start, ii = pathArray.length; i < ii; i++) {
|
||||
res.push(r = []);
|
||||
pa = pathArray[i];
|
||||
pa0 = pa[0];
|
||||
if (pa0 !== pa0.toUpperCase()) {
|
||||
r[0] = pa0.toUpperCase();
|
||||
switch (r[0]) {
|
||||
case 'A':
|
||||
r[1] = pa[1];
|
||||
r[2] = pa[2];
|
||||
r[3] = pa[3];
|
||||
r[4] = pa[4];
|
||||
r[5] = pa[5];
|
||||
r[6] = +pa[6] + x;
|
||||
r[7] = +pa[7] + y;
|
||||
break;
|
||||
case 'V':
|
||||
r[1] = +pa[1] + y;
|
||||
break;
|
||||
case 'H':
|
||||
r[1] = +pa[1] + x;
|
||||
break;
|
||||
case 'R':
|
||||
dots = [ x, y ].concat(pa.slice(1));
|
||||
for (let j = 2, jj = dots.length; j < jj; j++) {
|
||||
dots[j] = +dots[j] + x;
|
||||
dots[++j] = +dots[j] + y;
|
||||
}
|
||||
res.pop();
|
||||
res = res.concat(catmullRom2bezier(dots, crz));
|
||||
break;
|
||||
case 'O':
|
||||
res.pop();
|
||||
dots = ellipsePath(x, y, pa[1], pa[2]);
|
||||
dots.push(dots[0]);
|
||||
res = res.concat(dots);
|
||||
break;
|
||||
case 'U':
|
||||
res.pop();
|
||||
res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3]));
|
||||
r = [ 'U' ].concat(res[res.length - 1].slice(-2));
|
||||
break;
|
||||
case 'M':
|
||||
mx = +pa[1] + x;
|
||||
my = +pa[2] + y;
|
||||
break; // for lint
|
||||
default:
|
||||
for (let j = 1, jj = pa.length; j < jj; j++) {
|
||||
r[j] = +pa[j] + ((j % 2) ? x : y);
|
||||
}
|
||||
}
|
||||
} else if (pa0 === 'R') {
|
||||
dots = [ x, y ].concat(pa.slice(1));
|
||||
res.pop();
|
||||
res = res.concat(catmullRom2bezier(dots, crz));
|
||||
r = [ 'R' ].concat(pa.slice(-2));
|
||||
} else if (pa0 === 'O') {
|
||||
res.pop();
|
||||
dots = ellipsePath(x, y, pa[1], pa[2]);
|
||||
dots.push(dots[0]);
|
||||
res = res.concat(dots);
|
||||
} else if (pa0 === 'U') {
|
||||
res.pop();
|
||||
res = res.concat(ellipsePath(x, y, pa[1], pa[2], pa[3]));
|
||||
r = [ 'U' ].concat(res[res.length - 1].slice(-2));
|
||||
} else {
|
||||
for (let k = 0, kk = pa.length; k < kk; k++) {
|
||||
r[k] = pa[k];
|
||||
}
|
||||
}
|
||||
pa0 = pa0.toUpperCase();
|
||||
if (pa0 !== 'O') {
|
||||
switch (r[0]) {
|
||||
case 'Z':
|
||||
x = +mx;
|
||||
y = +my;
|
||||
break;
|
||||
case 'H':
|
||||
x = r[1];
|
||||
break;
|
||||
case 'V':
|
||||
y = r[1];
|
||||
break;
|
||||
case 'M':
|
||||
mx = r[r.length - 2];
|
||||
my = r[r.length - 1];
|
||||
break; // for lint
|
||||
default:
|
||||
x = r[r.length - 2];
|
||||
y = r[r.length - 1];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return res;
|
||||
};
|
||||
|
||||
const l2c = function(x1, y1, x2, y2) {
|
||||
return [ x1, y1, x2, y2, x2, y2 ];
|
||||
};
|
||||
|
||||
const q2c = function(x1, y1, ax, ay, x2, y2) {
|
||||
const _13 = 1 / 3;
|
||||
const _23 = 2 / 3;
|
||||
return [
|
||||
_13 * x1 + _23 * ax,
|
||||
_13 * y1 + _23 * ay,
|
||||
_13 * x2 + _23 * ax,
|
||||
_13 * y2 + _23 * ay,
|
||||
x2,
|
||||
y2
|
||||
];
|
||||
};
|
||||
|
||||
const a2c = function(x1, y1, rx, ry, angle, large_arc_flag, sweep_flag, x2, y2, recursive) {
|
||||
// for more information of where this math came from visit:
|
||||
// http://www.w3.org/TR/SVG11/implnote.html#ArcImplementationNotes
|
||||
if (rx === ry) {
|
||||
rx += 1;
|
||||
}
|
||||
|
||||
const _120 = Math.PI * 120 / 180;
|
||||
const rad = Math.PI / 180 * (+angle || 0);
|
||||
let res = [];
|
||||
let xy;
|
||||
let f1;
|
||||
let f2;
|
||||
let cx;
|
||||
let cy;
|
||||
const rotate = function(x, y, rad) {
|
||||
const X = x * Math.cos(rad) - y * Math.sin(rad);
|
||||
const Y = x * Math.sin(rad) + y * Math.cos(rad);
|
||||
return {
|
||||
x: X,
|
||||
y: Y
|
||||
};
|
||||
};
|
||||
if (!recursive) {
|
||||
xy = rotate(x1, y1, -rad);
|
||||
x1 = xy.x;
|
||||
y1 = xy.y;
|
||||
xy = rotate(x2, y2, -rad);
|
||||
x2 = xy.x;
|
||||
y2 = xy.y;
|
||||
if (x1 === x2 && y1 === y2) { // 若弧的起始点和终点重叠则错开一点
|
||||
x2 += 1;
|
||||
y2 += 1;
|
||||
}
|
||||
// const cos = Math.cos(Math.PI / 180 * angle);
|
||||
// const sin = Math.sin(Math.PI / 180 * angle);
|
||||
const x = (x1 - x2) / 2;
|
||||
const y = (y1 - y2) / 2;
|
||||
let h = (x * x) / (rx * rx) + (y * y) / (ry * ry);
|
||||
if (h > 1) {
|
||||
h = Math.sqrt(h);
|
||||
rx = h * rx;
|
||||
ry = h * ry;
|
||||
}
|
||||
const rx2 = rx * rx;
|
||||
const ry2 = ry * ry;
|
||||
const k = (large_arc_flag === sweep_flag ? -1 : 1) *
|
||||
Math.sqrt(Math.abs((rx2 * ry2 - rx2 * y * y - ry2 * x * x) / (rx2 * y * y + ry2 * x * x)));
|
||||
cx = k * rx * y / ry + (x1 + x2) / 2;
|
||||
cy = k * -ry * x / rx + (y1 + y2) / 2;
|
||||
f1 = Math.asin(((y1 - cy) / ry).toFixed(9));
|
||||
f2 = Math.asin(((y2 - cy) / ry).toFixed(9));
|
||||
|
||||
f1 = x1 < cx ? Math.PI - f1 : f1;
|
||||
f2 = x2 < cx ? Math.PI - f2 : f2;
|
||||
f1 < 0 && (f1 = Math.PI * 2 + f1);
|
||||
f2 < 0 && (f2 = Math.PI * 2 + f2);
|
||||
if (sweep_flag && f1 > f2) {
|
||||
f1 = f1 - Math.PI * 2;
|
||||
}
|
||||
if (!sweep_flag && f2 > f1) {
|
||||
f2 = f2 - Math.PI * 2;
|
||||
}
|
||||
} else {
|
||||
f1 = recursive[0];
|
||||
f2 = recursive[1];
|
||||
cx = recursive[2];
|
||||
cy = recursive[3];
|
||||
}
|
||||
let df = f2 - f1;
|
||||
if (Math.abs(df) > _120) {
|
||||
const f2old = f2;
|
||||
const x2old = x2;
|
||||
const y2old = y2;
|
||||
f2 = f1 + _120 * (sweep_flag && f2 > f1 ? 1 : -1);
|
||||
x2 = cx + rx * Math.cos(f2);
|
||||
y2 = cy + ry * Math.sin(f2);
|
||||
res = a2c(x2, y2, rx, ry, angle, 0, sweep_flag, x2old, y2old, [ f2, f2old, cx, cy ]);
|
||||
}
|
||||
df = f2 - f1;
|
||||
const c1 = Math.cos(f1);
|
||||
const s1 = Math.sin(f1);
|
||||
const c2 = Math.cos(f2);
|
||||
const s2 = Math.sin(f2);
|
||||
const t = Math.tan(df / 4);
|
||||
const hx = 4 / 3 * rx * t;
|
||||
const hy = 4 / 3 * ry * t;
|
||||
const m1 = [ x1, y1 ];
|
||||
const m2 = [ x1 + hx * s1, y1 - hy * c1 ];
|
||||
const m3 = [ x2 + hx * s2, y2 - hy * c2 ];
|
||||
const m4 = [ x2, y2 ];
|
||||
m2[0] = 2 * m1[0] - m2[0];
|
||||
m2[1] = 2 * m1[1] - m2[1];
|
||||
if (recursive) {
|
||||
return [ m2, m3, m4 ].concat(res);
|
||||
}
|
||||
res = [ m2, m3, m4 ].concat(res).join().split(',');
|
||||
const newres = [];
|
||||
for (let i = 0, ii = res.length; i < ii; i++) {
|
||||
newres[i] = i % 2 ? rotate(res[i - 1], res[i], rad).y : rotate(res[i], res[i + 1], rad).x;
|
||||
}
|
||||
return newres;
|
||||
|
||||
};
|
||||
|
||||
const pathTocurve = function(path, path2) {
|
||||
const p = pathToAbsolute(path);
|
||||
const p2 = path2 && pathToAbsolute(path2);
|
||||
const attrs = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
bx: 0,
|
||||
by: 0,
|
||||
X: 0,
|
||||
Y: 0,
|
||||
qx: null,
|
||||
qy: null
|
||||
};
|
||||
const attrs2 = {
|
||||
x: 0,
|
||||
y: 0,
|
||||
bx: 0,
|
||||
by: 0,
|
||||
X: 0,
|
||||
Y: 0,
|
||||
qx: null,
|
||||
qy: null
|
||||
};
|
||||
const pcoms1 = []; // path commands of original path p
|
||||
const pcoms2 = []; // path commands of original path p2
|
||||
let pfirst = ''; // temporary holder for original path command
|
||||
let pcom = ''; // holder for previous path command of original path
|
||||
let ii;
|
||||
const processPath = function(path, d, pcom) {
|
||||
let nx,
|
||||
ny;
|
||||
if (!path) {
|
||||
return [ 'C', d.x, d.y, d.x, d.y, d.x, d.y ];
|
||||
}!(path[0] in {
|
||||
T: 1,
|
||||
Q: 1
|
||||
}) && (d.qx = d.qy = null);
|
||||
switch (path[0]) {
|
||||
case 'M':
|
||||
d.X = path[1];
|
||||
d.Y = path[2];
|
||||
break;
|
||||
case 'A':
|
||||
path = [ 'C' ].concat(a2c.apply(0, [ d.x, d.y ].concat(path.slice(1))));
|
||||
break;
|
||||
case 'S':
|
||||
if (pcom === 'C' || pcom === 'S') { // In "S" case we have to take into account, if the previous command is C/S.
|
||||
nx = d.x * 2 - d.bx; // And reflect the previous
|
||||
ny = d.y * 2 - d.by; // command's control point relative to the current point.
|
||||
} else { // or some else or nothing
|
||||
nx = d.x;
|
||||
ny = d.y;
|
||||
}
|
||||
path = [ 'C', nx, ny ].concat(path.slice(1));
|
||||
break;
|
||||
case 'T':
|
||||
if (pcom === 'Q' || pcom === 'T') { // In "T" case we have to take into account, if the previous command is Q/T.
|
||||
d.qx = d.x * 2 - d.qx; // And make a reflection similar
|
||||
d.qy = d.y * 2 - d.qy; // to case "S".
|
||||
} else { // or something else or nothing
|
||||
d.qx = d.x;
|
||||
d.qy = d.y;
|
||||
}
|
||||
path = [ 'C' ].concat(q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
|
||||
break;
|
||||
case 'Q':
|
||||
d.qx = path[1];
|
||||
d.qy = path[2];
|
||||
path = [ 'C' ].concat(q2c(d.x, d.y, path[1], path[2], path[3], path[4]));
|
||||
break;
|
||||
case 'L':
|
||||
path = [ 'C' ].concat(l2c(d.x, d.y, path[1], path[2]));
|
||||
break;
|
||||
case 'H':
|
||||
path = [ 'C' ].concat(l2c(d.x, d.y, path[1], d.y));
|
||||
break;
|
||||
case 'V':
|
||||
path = [ 'C' ].concat(l2c(d.x, d.y, d.x, path[1]));
|
||||
break;
|
||||
case 'Z':
|
||||
path = [ 'C' ].concat(l2c(d.x, d.y, d.X, d.Y));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return path;
|
||||
};
|
||||
const fixArc = function(pp, i) {
|
||||
if (pp[i].length > 7) {
|
||||
pp[i].shift();
|
||||
const pi = pp[i];
|
||||
while (pi.length) {
|
||||
pcoms1[i] = 'A'; // if created multiple C:s, their original seg is saved
|
||||
p2 && (pcoms2[i] = 'A'); // the same as above
|
||||
pp.splice(i++, 0, [ 'C' ].concat(pi.splice(0, 6)));
|
||||
}
|
||||
pp.splice(i, 1);
|
||||
ii = Math.max(p.length, p2 && p2.length || 0);
|
||||
}
|
||||
};
|
||||
const fixM = function(path1, path2, a1, a2, i) {
|
||||
if (path1 && path2 && path1[i][0] === 'M' && path2[i][0] !== 'M') {
|
||||
path2.splice(i, 0, [ 'M', a2.x, a2.y ]);
|
||||
a1.bx = 0;
|
||||
a1.by = 0;
|
||||
a1.x = path1[i][1];
|
||||
a1.y = path1[i][2];
|
||||
ii = Math.max(p.length, p2 && p2.length || 0);
|
||||
}
|
||||
};
|
||||
ii = Math.max(p.length, p2 && p2.length || 0);
|
||||
for (let i = 0; i < ii; i++) {
|
||||
|
||||
p[i] && (pfirst = p[i][0]); // save current path command
|
||||
|
||||
if (pfirst !== 'C') { // C is not saved yet, because it may be result of conversion
|
||||
pcoms1[i] = pfirst; // Save current path command
|
||||
i && (pcom = pcoms1[i - 1]); // Get previous path command pcom
|
||||
}
|
||||
p[i] = processPath(p[i], attrs, pcom); // Previous path command is inputted to processPath
|
||||
|
||||
if (pcoms1[i] !== 'A' && pfirst === 'C') pcoms1[i] = 'C'; // A is the only command
|
||||
// which may produce multiple C:s
|
||||
// so we have to make sure that C is also C in original path
|
||||
|
||||
fixArc(p, i); // fixArc adds also the right amount of A:s to pcoms1
|
||||
|
||||
if (p2) { // the same procedures is done to p2
|
||||
p2[i] && (pfirst = p2[i][0]);
|
||||
if (pfirst !== 'C') {
|
||||
pcoms2[i] = pfirst;
|
||||
i && (pcom = pcoms2[i - 1]);
|
||||
}
|
||||
p2[i] = processPath(p2[i], attrs2, pcom);
|
||||
|
||||
if (pcoms2[i] !== 'A' && pfirst === 'C') {
|
||||
pcoms2[i] = 'C';
|
||||
}
|
||||
|
||||
fixArc(p2, i);
|
||||
}
|
||||
fixM(p, p2, attrs, attrs2, i);
|
||||
fixM(p2, p, attrs2, attrs, i);
|
||||
const seg = p[i];
|
||||
const seg2 = p2 && p2[i];
|
||||
const seglen = seg.length;
|
||||
const seg2len = p2 && seg2.length;
|
||||
attrs.x = seg[seglen - 2];
|
||||
attrs.y = seg[seglen - 1];
|
||||
attrs.bx = parseFloat(seg[seglen - 4]) || attrs.x;
|
||||
attrs.by = parseFloat(seg[seglen - 3]) || attrs.y;
|
||||
attrs2.bx = p2 && (parseFloat(seg2[seg2len - 4]) || attrs2.x);
|
||||
attrs2.by = p2 && (parseFloat(seg2[seg2len - 3]) || attrs2.y);
|
||||
attrs2.x = p2 && seg2[seg2len - 2];
|
||||
attrs2.y = p2 && seg2[seg2len - 1];
|
||||
}
|
||||
|
||||
return p2 ? [ p, p2 ] : p;
|
||||
};
|
||||
|
||||
const p2s = /,?([a-z]),?/gi;
|
||||
const parsePathArray = function(path) {
|
||||
return path.join(',').replace(p2s, '$1');
|
||||
};
|
||||
|
||||
const base3 = function(t, p1, p2, p3, p4) {
|
||||
const t1 = -3 * p1 + 9 * p2 - 9 * p3 + 3 * p4;
|
||||
const t2 = t * t1 + 6 * p1 - 12 * p2 + 6 * p3;
|
||||
return t * t2 - 3 * p1 + 3 * p2;
|
||||
};
|
||||
|
||||
const bezlen = function(x1, y1, x2, y2, x3, y3, x4, y4, z) {
|
||||
if (z === null) {
|
||||
z = 1;
|
||||
}
|
||||
z = z > 1 ? 1 : z < 0 ? 0 : z;
|
||||
const z2 = z / 2;
|
||||
const n = 12;
|
||||
const Tvalues = [ -0.1252, 0.1252, -0.3678, 0.3678, -0.5873, 0.5873, -0.7699, 0.7699, -0.9041, 0.9041, -0.9816, 0.9816 ];
|
||||
const Cvalues = [ 0.2491, 0.2491, 0.2335, 0.2335, 0.2032, 0.2032, 0.1601, 0.1601, 0.1069, 0.1069, 0.0472, 0.0472 ];
|
||||
let sum = 0;
|
||||
for (let i = 0; i < n; i++) {
|
||||
const ct = z2 * Tvalues[i] + z2;
|
||||
const xbase = base3(ct, x1, x2, x3, x4);
|
||||
const ybase = base3(ct, y1, y2, y3, y4);
|
||||
const comb = xbase * xbase + ybase * ybase;
|
||||
sum += Cvalues[i] * Math.sqrt(comb);
|
||||
}
|
||||
return z2 * sum;
|
||||
};
|
||||
|
||||
const curveDim = function(x0, y0, x1, y1, x2, y2, x3, y3) {
|
||||
const tvalues = [];
|
||||
const bounds = [
|
||||
[],
|
||||
[]
|
||||
];
|
||||
let a;
|
||||
let b;
|
||||
let c;
|
||||
let t;
|
||||
|
||||
for (let i = 0; i < 2; ++i) {
|
||||
if (i === 0) {
|
||||
b = 6 * x0 - 12 * x1 + 6 * x2;
|
||||
a = -3 * x0 + 9 * x1 - 9 * x2 + 3 * x3;
|
||||
c = 3 * x1 - 3 * x0;
|
||||
} else {
|
||||
b = 6 * y0 - 12 * y1 + 6 * y2;
|
||||
a = -3 * y0 + 9 * y1 - 9 * y2 + 3 * y3;
|
||||
c = 3 * y1 - 3 * y0;
|
||||
}
|
||||
if (Math.abs(a) < 1e-12) {
|
||||
if (Math.abs(b) < 1e-12) {
|
||||
continue;
|
||||
}
|
||||
t = -c / b;
|
||||
if (t > 0 && t < 1) {
|
||||
tvalues.push(t);
|
||||
}
|
||||
continue;
|
||||
}
|
||||
const b2ac = b * b - 4 * c * a;
|
||||
const sqrtb2ac = Math.sqrt(b2ac);
|
||||
if (b2ac < 0) {
|
||||
continue;
|
||||
}
|
||||
const t1 = (-b + sqrtb2ac) / (2 * a);
|
||||
if (t1 > 0 && t1 < 1) {
|
||||
tvalues.push(t1);
|
||||
}
|
||||
const t2 = (-b - sqrtb2ac) / (2 * a);
|
||||
if (t2 > 0 && t2 < 1) {
|
||||
tvalues.push(t2);
|
||||
}
|
||||
}
|
||||
|
||||
let j = tvalues.length;
|
||||
const jlen = j;
|
||||
let mt;
|
||||
while (j--) {
|
||||
t = tvalues[j];
|
||||
mt = 1 - t;
|
||||
bounds[0][j] = (mt * mt * mt * x0) + (3 * mt * mt * t * x1) + (3 * mt * t * t * x2) + (t * t * t * x3);
|
||||
bounds[1][j] = (mt * mt * mt * y0) + (3 * mt * mt * t * y1) + (3 * mt * t * t * y2) + (t * t * t * y3);
|
||||
}
|
||||
|
||||
bounds[0][jlen] = x0;
|
||||
bounds[1][jlen] = y0;
|
||||
bounds[0][jlen + 1] = x3;
|
||||
bounds[1][jlen + 1] = y3;
|
||||
bounds[0].length = bounds[1].length = jlen + 2;
|
||||
|
||||
|
||||
return {
|
||||
min: {
|
||||
x: Math.min.apply(0, bounds[0]),
|
||||
y: Math.min.apply(0, bounds[1])
|
||||
},
|
||||
max: {
|
||||
x: Math.max.apply(0, bounds[0]),
|
||||
y: Math.max.apply(0, bounds[1])
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const intersect = function(x1, y1, x2, y2, x3, y3, x4, y4) {
|
||||
if (
|
||||
Math.max(x1, x2) < Math.min(x3, x4) ||
|
||||
Math.min(x1, x2) > Math.max(x3, x4) ||
|
||||
Math.max(y1, y2) < Math.min(y3, y4) ||
|
||||
Math.min(y1, y2) > Math.max(y3, y4)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
const nx = (x1 * y2 - y1 * x2) * (x3 - x4) - (x1 - x2) * (x3 * y4 - y3 * x4);
|
||||
const ny = (x1 * y2 - y1 * x2) * (y3 - y4) - (y1 - y2) * (x3 * y4 - y3 * x4);
|
||||
const denominator = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4);
|
||||
|
||||
if (!denominator) {
|
||||
return;
|
||||
}
|
||||
const px = nx / denominator;
|
||||
const py = ny / denominator;
|
||||
const px2 = +px.toFixed(2);
|
||||
const py2 = +py.toFixed(2);
|
||||
if (
|
||||
px2 < +Math.min(x1, x2).toFixed(2) ||
|
||||
px2 > +Math.max(x1, x2).toFixed(2) ||
|
||||
px2 < +Math.min(x3, x4).toFixed(2) ||
|
||||
px2 > +Math.max(x3, x4).toFixed(2) ||
|
||||
py2 < +Math.min(y1, y2).toFixed(2) ||
|
||||
py2 > +Math.max(y1, y2).toFixed(2) ||
|
||||
py2 < +Math.min(y3, y4).toFixed(2) ||
|
||||
py2 > +Math.max(y3, y4).toFixed(2)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
return {
|
||||
x: px,
|
||||
y: py
|
||||
};
|
||||
};
|
||||
|
||||
const isPointInsideBBox = function(bbox, x, y) {
|
||||
return x >= bbox.x &&
|
||||
x <= bbox.x + bbox.width &&
|
||||
y >= bbox.y &&
|
||||
y <= bbox.y + bbox.height;
|
||||
};
|
||||
|
||||
const rectPath = function(x, y, w, h, r) {
|
||||
if (r) {
|
||||
return [
|
||||
[ 'M', +x + (+r), y ],
|
||||
[ 'l', w - r * 2, 0 ],
|
||||
[ 'a', r, r, 0, 0, 1, r, r ],
|
||||
[ 'l', 0, h - r * 2 ],
|
||||
[ 'a', r, r, 0, 0, 1, -r, r ],
|
||||
[ 'l', r * 2 - w, 0 ],
|
||||
[ 'a', r, r, 0, 0, 1, -r, -r ],
|
||||
[ 'l', 0, r * 2 - h ],
|
||||
[ 'a', r, r, 0, 0, 1, r, -r ],
|
||||
[ 'z' ]
|
||||
];
|
||||
}
|
||||
const res = [
|
||||
[ 'M', x, y ],
|
||||
[ 'l', w, 0 ],
|
||||
[ 'l', 0, h ],
|
||||
[ 'l', -w, 0 ],
|
||||
[ 'z' ]
|
||||
];
|
||||
res.parsePathArray = parsePathArray;
|
||||
return res;
|
||||
};
|
||||
|
||||
const box = function(x, y, width, height) {
|
||||
if (x === null) {
|
||||
x = y = width = height = 0;
|
||||
}
|
||||
if (y === null) {
|
||||
y = x.y;
|
||||
width = x.width;
|
||||
height = x.height;
|
||||
x = x.x;
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
width,
|
||||
w: width,
|
||||
height,
|
||||
h: height,
|
||||
x2: x + width,
|
||||
y2: y + height,
|
||||
cx: x + width / 2,
|
||||
cy: y + height / 2,
|
||||
r1: Math.min(width, height) / 2,
|
||||
r2: Math.max(width, height) / 2,
|
||||
r0: Math.sqrt(width * width + height * height) / 2,
|
||||
path: rectPath(x, y, width, height),
|
||||
vb: [ x, y, width, height ].join(' ')
|
||||
};
|
||||
};
|
||||
|
||||
const isBBoxIntersect = function(bbox1, bbox2) {
|
||||
bbox1 = box(bbox1);
|
||||
bbox2 = box(bbox2);
|
||||
return isPointInsideBBox(bbox2, bbox1.x, bbox1.y) || isPointInsideBBox(bbox2, bbox1.x2, bbox1.y) || isPointInsideBBox(bbox2, bbox1.x, bbox1.y2) || isPointInsideBBox(bbox2, bbox1.x2, bbox1.y2) || isPointInsideBBox(bbox1, bbox2.x, bbox2.y) || isPointInsideBBox(bbox1, bbox2.x2, bbox2.y) || isPointInsideBBox(bbox1, bbox2.x, bbox2.y2) || isPointInsideBBox(bbox1, bbox2.x2, bbox2.y2) || (bbox1.x < bbox2.x2 && bbox1.x > bbox2.x || bbox2.x < bbox1.x2 && bbox2.x > bbox1.x) && (bbox1.y < bbox2.y2 && bbox1.y > bbox2.y || bbox2.y < bbox1.y2 && bbox2.y > bbox1.y);
|
||||
};
|
||||
|
||||
const bezierBBox = function(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y) {
|
||||
if (!Util.isArray(p1x)) {
|
||||
p1x = [ p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y ];
|
||||
}
|
||||
const bbox = curveDim.apply(null, p1x);
|
||||
return box(
|
||||
bbox.min.x,
|
||||
bbox.min.y,
|
||||
bbox.max.x - bbox.min.x,
|
||||
bbox.max.y - bbox.min.y
|
||||
);
|
||||
};
|
||||
|
||||
const findDotsAtSegment = function(p1x, p1y, c1x, c1y, c2x, c2y, p2x, p2y, t) {
|
||||
const t1 = 1 - t;
|
||||
const t13 = Math.pow(t1, 3);
|
||||
const t12 = Math.pow(t1, 2);
|
||||
const t2 = t * t;
|
||||
const t3 = t2 * t;
|
||||
const x = t13 * p1x + t12 * 3 * t * c1x + t1 * 3 * t * t * c2x + t3 * p2x;
|
||||
const y = t13 * p1y + t12 * 3 * t * c1y + t1 * 3 * t * t * c2y + t3 * p2y;
|
||||
const mx = p1x + 2 * t * (c1x - p1x) + t2 * (c2x - 2 * c1x + p1x);
|
||||
const my = p1y + 2 * t * (c1y - p1y) + t2 * (c2y - 2 * c1y + p1y);
|
||||
const nx = c1x + 2 * t * (c2x - c1x) + t2 * (p2x - 2 * c2x + c1x);
|
||||
const ny = c1y + 2 * t * (c2y - c1y) + t2 * (p2y - 2 * c2y + c1y);
|
||||
const ax = t1 * p1x + t * c1x;
|
||||
const ay = t1 * p1y + t * c1y;
|
||||
const cx = t1 * c2x + t * p2x;
|
||||
const cy = t1 * c2y + t * p2y;
|
||||
const alpha = (90 - Math.atan2(mx - nx, my - ny) * 180 / Math.PI);
|
||||
// (mx > nx || my < ny) && (alpha += 180);
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
m: {
|
||||
x: mx,
|
||||
y: my
|
||||
},
|
||||
n: {
|
||||
x: nx,
|
||||
y: ny
|
||||
},
|
||||
start: {
|
||||
x: ax,
|
||||
y: ay
|
||||
},
|
||||
end: {
|
||||
x: cx,
|
||||
y: cy
|
||||
},
|
||||
alpha
|
||||
};
|
||||
};
|
||||
|
||||
const interHelper = function(bez1, bez2, justCount) {
|
||||
const bbox1 = bezierBBox(bez1);
|
||||
const bbox2 = bezierBBox(bez2);
|
||||
if (!isBBoxIntersect(bbox1, bbox2)) {
|
||||
return justCount ? 0 : [];
|
||||
}
|
||||
const l1 = bezlen.apply(0, bez1);
|
||||
const l2 = bezlen.apply(0, bez2);
|
||||
const n1 = ~~(l1 / 8);
|
||||
const n2 = ~~(l2 / 8);
|
||||
const dots1 = [];
|
||||
const dots2 = [];
|
||||
const xy = {};
|
||||
let res = justCount ? 0 : [];
|
||||
for (let i = 0; i < n1 + 1; i++) {
|
||||
const d = findDotsAtSegment.apply(0, bez1.concat(i / n1));
|
||||
dots1.push({
|
||||
x: d.x,
|
||||
y: d.y,
|
||||
t: i / n1
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < n2 + 1; i++) {
|
||||
const d = findDotsAtSegment.apply(0, bez2.concat(i / n2));
|
||||
dots2.push({
|
||||
x: d.x,
|
||||
y: d.y,
|
||||
t: i / n2
|
||||
});
|
||||
}
|
||||
for (let i = 0; i < n1; i++) {
|
||||
for (let j = 0; j < n2; j++) {
|
||||
const di = dots1[i];
|
||||
const di1 = dots1[i + 1];
|
||||
const dj = dots2[j];
|
||||
const dj1 = dots2[j + 1];
|
||||
const ci = Math.abs(di1.x - di.x) < 0.001 ? 'y' : 'x';
|
||||
const cj = Math.abs(dj1.x - dj.x) < 0.001 ? 'y' : 'x';
|
||||
const is = intersect(di.x, di.y, di1.x, di1.y, dj.x, dj.y, dj1.x, dj1.y);
|
||||
if (is) {
|
||||
if (xy[is.x.toFixed(4)] === is.y.toFixed(4)) {
|
||||
continue;
|
||||
}
|
||||
xy[is.x.toFixed(4)] = is.y.toFixed(4);
|
||||
const t1 = di.t + Math.abs((is[ci] - di[ci]) / (di1[ci] - di[ci])) * (di1.t - di.t);
|
||||
const t2 = dj.t + Math.abs((is[cj] - dj[cj]) / (dj1[cj] - dj[cj])) * (dj1.t - dj.t);
|
||||
if (t1 >= 0 && t1 <= 1 && t2 >= 0 && t2 <= 1) {
|
||||
if (justCount) {
|
||||
res++;
|
||||
} else {
|
||||
res.push({
|
||||
x: is.x,
|
||||
y: is.y,
|
||||
t1,
|
||||
t2
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
const interPathHelper = function(path1, path2, justCount) {
|
||||
path1 = pathTocurve(path1);
|
||||
path2 = pathTocurve(path2);
|
||||
let x1;
|
||||
let y1;
|
||||
let x2;
|
||||
let y2;
|
||||
let x1m;
|
||||
let y1m;
|
||||
let x2m;
|
||||
let y2m;
|
||||
let bez1;
|
||||
let bez2;
|
||||
let res = justCount ? 0 : [];
|
||||
for (let i = 0, ii = path1.length; i < ii; i++) {
|
||||
const pi = path1[i];
|
||||
if (pi[0] === 'M') {
|
||||
x1 = x1m = pi[1];
|
||||
y1 = y1m = pi[2];
|
||||
} else {
|
||||
if (pi[0] === 'C') {
|
||||
bez1 = [ x1, y1 ].concat(pi.slice(1));
|
||||
x1 = bez1[6];
|
||||
y1 = bez1[7];
|
||||
} else {
|
||||
bez1 = [ x1, y1, x1, y1, x1m, y1m, x1m, y1m ];
|
||||
x1 = x1m;
|
||||
y1 = y1m;
|
||||
}
|
||||
for (let j = 0, jj = path2.length; j < jj; j++) {
|
||||
const pj = path2[j];
|
||||
if (pj[0] === 'M') {
|
||||
x2 = x2m = pj[1];
|
||||
y2 = y2m = pj[2];
|
||||
} else {
|
||||
if (pj[0] === 'C') {
|
||||
bez2 = [ x2, y2 ].concat(pj.slice(1));
|
||||
x2 = bez2[6];
|
||||
y2 = bez2[7];
|
||||
} else {
|
||||
bez2 = [ x2, y2, x2, y2, x2m, y2m, x2m, y2m ];
|
||||
x2 = x2m;
|
||||
y2 = y2m;
|
||||
}
|
||||
const intr = interHelper(bez1, bez2, justCount);
|
||||
if (justCount) {
|
||||
res += intr;
|
||||
} else {
|
||||
for (let k = 0, kk = intr.length; k < kk; k++) {
|
||||
intr[k].segment1 = i;
|
||||
intr[k].segment2 = j;
|
||||
intr[k].bez1 = bez1;
|
||||
intr[k].bez2 = bez2;
|
||||
}
|
||||
res = res.concat(intr);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
const pathIntersection = function(path1, path2) {
|
||||
return interPathHelper(path1, path2);
|
||||
};
|
||||
|
||||
export default {
|
||||
parsePathString,
|
||||
parsePathArray,
|
||||
pathTocurve,
|
||||
pathToAbsolute,
|
||||
catmullRomToBezier: catmullRom2bezier,
|
||||
rectPath,
|
||||
intersection: pathIntersection
|
||||
};
|
||||
Loading…
Reference in New Issue