fl-web-component 1.3.16 → 1.3.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +4 -0
  2. package/dist/fl-web-component.common.js +634 -47
  3. package/dist/fl-web-component.common.js.map +1 -1
  4. package/dist/fl-web-component.css +1 -1
  5. package/package.json +1 -1
  6. package/packages/components/com-flcanvas/components/entityFormatting.js +788 -453
  7. package/packages/components/com-flcanvas/index.vue +13 -5
package/packages/components/com-flcanvas/components/entityFormatting.js CHANGED
@@ -1,507 +1,842 @@
1
1
  import bSpline from "./bspline";
2
2
  import * as THREE from "three";
3
3
 
4
+ //rgb转换
5
+
6
+ function decimalToRGBHex(decimalValue) {
7
+ // Ensure the input is a valid integer
8
+ if (!Number.isInteger(decimalValue)) {
9
+ throw new Error("Input must be an integer.");
10
+ }
11
+
12
+ // Ensure the input is within the valid range for 24-bit colors
13
+ if (decimalValue < 0 || decimalValue > 0xFFFFFF) {
14
+ throw new Error("Input must be between 0 and 16777215 (0xFFFFFF).");
15
+ }
16
+
17
+ // Extract the red, green, and blue components
18
+ var red = (decimalValue >> 16) & 0xFF;
19
+ var green = (decimalValue >> 8) & 0xFF;
20
+ var blue = decimalValue & 0xFF;
21
+
22
+ // Convert the RGB components to hexadecimal and format as a string
23
+ var hex = "#" + red.toString(16).padStart(2, '0') +
24
+ green.toString(16).padStart(2, '0') +
25
+ blue.toString(16).padStart(2, '0');
26
+
27
+ return {
28
+ red: red,
29
+ green: green,
30
+ blue: blue,
31
+ hex: hex.toUpperCase()
32
+ };
33
+ }
4
34
  export function handleFn(functionName, recordDxf, entity, group, key, configParams, konvaLayer) {
5
- switch (functionName) {
6
- case 'LINE': drawLine(recordDxf, entity, group, key, configParams)
7
- break;
8
- case 'TEXT': drawText(recordDxf, entity, group, key, configParams)
9
- break;
10
- case 'LWPOLYLINE': drawLwLine(recordDxf, entity, group, key, configParams)
11
- break;
12
- case 'ARC': drawArc(recordDxf, entity, group, key, configParams)
13
- break;
14
- case 'CIRCLE': drawArc(recordDxf, entity, group, key, configParams)
15
- break;
16
- case 'ELLIPSE': drawEllpse(recordDxf, entity, group, key, configParams)
17
- break;
18
- //case 'MTEXT': drawMtext(recordDxf, entity, group, key, configParams)
19
- //break;
20
- case 'SPLINE': drawSpline(recordDxf, entity, group, key, configParams)
21
- break;
22
- // case 'INSERT': drawInsert(recordDxf, entity, group, key, configParams, konvaLayer)
23
- // break;
24
- }
35
+ console.log(functionName);
36
+
37
+ switch (functionName) {
38
+ case 'LINE': drawLine(recordDxf, entity, group, key, configParams)
39
+ break;
40
+ case 'TEXT': drawText(recordDxf, entity, group, key, configParams)
41
+ break;
42
+ case 'LWPOLYLINE': drawLwLine(recordDxf, entity, group, key, configParams)
43
+ break;
44
+ case 'ARC': drawArc(recordDxf, entity, group, key, configParams)
45
+ break;
46
+ case 'CIRCLE': drawArc(recordDxf, entity, group, key, configParams)
47
+ break;
48
+ case 'ELLIPSE': drawEllpse(recordDxf, entity, group, key, configParams)
49
+ break;
50
+ case 'HATCH':drawHatch(recordDxf, entity, group, key, configParams)
51
+ break;
52
+ //case 'MTEXT': drawMtext(recordDxf, entity, group, key, configParams)
53
+ //break;
54
+ case 'SPLINE': drawSpline(recordDxf, entity, group, key, configParams)
55
+ break;
56
+ // case 'INSERT': drawInsert(recordDxf, entity, group, key, configParams, konvaLayer)
57
+ // break;
58
+ }
25
59
  }
26
60
  export function formatEntity(entities) {
27
- var obj = {}
28
- for (let i = 0; i < entities.length; i++) {
29
- if (obj.hasOwnProperty(entities[i].layer)) {
30
- obj[entities[i].layer].push(entities[i])
31
- } else {
32
- obj[entities[i].layer] = []
33
- obj[entities[i].layer].push(entities[i])
61
+ var obj = {}
62
+ for (let i = 0; i < entities.length; i++) {
63
+ if (obj.hasOwnProperty(entities[i].layer)) {
64
+ obj[entities[i].layer].push(entities[i])
65
+ } else {
66
+ obj[entities[i].layer] = []
67
+ obj[entities[i].layer].push(entities[i])
68
+ }
34
69
  }
35
- }
36
- return obj
70
+ return obj
37
71
  }
38
72
  export function getAbsolutePoints(points) {
39
- let x = 0;
40
- let y = 0;
41
- points.forEach((point, index) => {
42
- if (index % 2 === 0) {
43
- x = x + point;
44
- } else {
45
- y = y + point;
46
- }
47
- });
48
- return {
49
- x: Math.ceil(x / (points.length / 2)),
50
- y: Math.ceil(y / (points.length / 2)),
51
- };
73
+ let x = 0;
74
+ let y = 0;
75
+ points.forEach((point, index) => {
76
+ if (index % 2 === 0) {
77
+ x = x + point;
78
+ } else {
79
+ y = y + point;
80
+ }
81
+ });
82
+ return {
83
+ x: Math.ceil(x / (points.length / 2)),
84
+ y: Math.ceil(y / (points.length / 2)),
85
+ };
52
86
  }
53
87
  export function getColors() {
54
- return colors;
88
+ return colors;
55
89
  }
56
90
  // 居中定位
57
91
  export function centering(obj, container, konvaStage, scaleBy) {
58
- // 由于图纸结构解析的变更 可能最外层的group x y 都是0所以 需要拿到x y有值的group
59
- const filterGroup = obj.filter(item => item.attrs.isGroup && !item.attrs.isMix)
60
- if (filterGroup.length > 0) {
61
- if (filterGroup[0].attrs.hasOwnProperty('isBlock') && filterGroup[0].attrs.isBlock) {
62
- computedCenter(filterGroup[0].attrs.x, filterGroup[0].attrs.y, container, konvaStage, scaleBy)
92
+ // 由于图纸结构解析的变更 可能最外层的group x y 都是0所以 需要拿到x y有值的group
93
+ const filterGroup = obj.filter(item => item.attrs.isGroup && !item.attrs.isMix)
94
+ if (filterGroup.length > 0) {
95
+ if (filterGroup[0].attrs.hasOwnProperty('isBlock') && filterGroup[0].attrs.isBlock) {
96
+ computedCenter(filterGroup[0].attrs.x, filterGroup[0].attrs.y, container, konvaStage, scaleBy)
97
+ } else {
98
+ const target = obj.filter((item) => !item.attrs.isGroup);
99
+ if (target[0].className === "Text") {
100
+ computedCenter(target[0].x(), target[0].y(), container, konvaStage, scaleBy)
101
+ } else if (target[0].className === "Line") {
102
+ const p = getAbsolutePoints(target[0].getPoints());
103
+ computedCenter(p.x, p.y, container, konvaStage, scaleBy)
104
+ }
105
+ }
63
106
  } else {
64
- const target = obj.filter((item) => !item.attrs.isGroup);
65
- if (target[0].className === "Text") {
66
- computedCenter(target[0].x(), target[0].y(), container, konvaStage, scaleBy)
67
- } else if (target[0].className === "Line") {
68
- const p = getAbsolutePoints(target[0].getPoints());
69
- computedCenter(p.x, p.y, container, konvaStage, scaleBy)
70
- } else {
71
- computedCenter(target[0].px, target[0].py, container, konvaStage, scaleBy)
72
- }
107
+ const target = obj.filter((item) => !item.attrs.isGroup);
108
+ if (target[0].className === "Text") {
109
+ computedCenter(target[0].x(), target[0].y(), container, konvaStage, scaleBy)
110
+ } else if (target[0].className === "Line") {
111
+ const p = getAbsolutePoints(target[0].getPoints());
112
+ computedCenter(p.x, p.y, container, konvaStage, scaleBy)
113
+ }
73
114
  }
74
- } else {
75
- const target = obj.filter((item) => !item.attrs.isGroup);
76
- if (target[0].className === "Text") {
77
- computedCenter(target[0].x(), target[0].y(), container, konvaStage, scaleBy)
78
- } else if (target[0].className === "Line") {
79
- const p = getAbsolutePoints(target[0].getPoints());
80
- computedCenter(p.x, p.y, container, konvaStage, scaleBy)
81
- } else {
82
- computedCenter(target[0].px, target[0].py, container, konvaStage, scaleBy)
83
- }
84
- }
85
115
  }
86
116
  // 计算居中位置
87
117
  function computedCenter(x, y, container, konvaStage, scaleBy) {
88
- let newX = container.clientWidth / 2 - x * scaleBy;
89
- let newY = container.clientHeight / 2 -y * scaleBy;
90
- konvaStage.position({ x: newX, y: newY });
118
+ let newX = container.clientWidth / 2 - x * scaleBy;
119
+ let newY = container.clientHeight / 2 -y * scaleBy;
120
+ konvaStage.position({ x: newX, y: newY });
91
121
  }
92
122
 
93
123
  function getBSplinePolyline(
94
- controlPoints,
95
- degree,
96
- knots,
97
- interpolationsPerSplineSegment,
98
- weights
124
+ controlPoints,
125
+ degree,
126
+ knots,
127
+ interpolationsPerSplineSegment,
128
+ weights
99
129
  ) {
100
- const polyline = [];
101
- const controlPointsForLib = controlPoints.map(function (p) {
102
- return [p.x, p.y];
103
- });
104
- const segmentTs = [knots[degree]];
105
- const domain = [knots[degree], knots[knots.length - 1 - degree]];
106
- for (let k = degree + 1; k < knots.length - degree; ++k) {
107
- if (segmentTs[segmentTs.length - 1] !== knots[k]) {
108
- segmentTs.push(knots[k]);
130
+ const polyline = [];
131
+ const controlPointsForLib = controlPoints.map(function (p) {
132
+ return [p.x, p.y];
133
+ });
134
+ const segmentTs = [knots[degree]];
135
+ const domain = [knots[degree], knots[knots.length - 1 - degree]];
136
+ for (let k = degree + 1; k < knots.length - degree; ++k) {
137
+ if (segmentTs[segmentTs.length - 1] !== knots[k]) {
138
+ segmentTs.push(knots[k]);
139
+ }
109
140
  }
110
- }
111
- interpolationsPerSplineSegment = interpolationsPerSplineSegment || 25;
112
- for (let i = 1; i < segmentTs.length; ++i) {
113
- const uMin = segmentTs[i - 1];
114
- const uMax = segmentTs[i];
115
- for (let k = 0; k <= interpolationsPerSplineSegment; ++k) {
116
- const u = (k / interpolationsPerSplineSegment) * (uMax - uMin) + uMin;
117
- let t = (u - domain[0]) / (domain[1] - domain[0]);
118
- t = Math.max(t, 0);
119
- t = Math.min(t, 1);
120
- const p = bSpline(t, degree, controlPointsForLib, knots, weights);
121
- polyline.push(new THREE.Vector2(p[0], p[1]));
141
+ interpolationsPerSplineSegment = interpolationsPerSplineSegment || 25;
142
+ for (let i = 1; i < segmentTs.length; ++i) {
143
+ const uMin = segmentTs[i - 1];
144
+ const uMax = segmentTs[i];
145
+ for (let k = 0; k <= interpolationsPerSplineSegment; ++k) {
146
+ const u = (k / interpolationsPerSplineSegment) * (uMax - uMin) + uMin;
147
+ let t = (u - domain[0]) / (domain[1] - domain[0]);
148
+ t = Math.max(t, 0);
149
+ t = Math.min(t, 1);
150
+ const p = bSpline(t, degree, controlPointsForLib, knots, weights);
151
+ polyline.push(new THREE.Vector2(p[0], p[1]));
152
+ }
122
153
  }
123
- }
124
- return polyline;
154
+ return polyline;
125
155
  }
126
156
  function mtextContentAndFormattingToTextAndStyle(
127
- textAndControlChars,
128
- entity,
129
- configParams
157
+ textAndControlChars,
158
+ entity,
159
+ configParams
130
160
  ) {
131
- let activeStyle = {
132
- horizontalAlignment: "left",
133
- textHeight: entity.height,
134
- };
135
- var text = [];
136
- for (let item of textAndControlChars) {
137
- if (typeof item === "string") {
138
- if (item.startsWith("pxq") && item.endsWith(";")) {
139
- if (item.indexOf("c") !== -1)
140
- activeStyle.horizontalAlignment = "center";
141
- else if (item.indexOf("l") !== -1)
142
- activeStyle.horizontalAlignment = "left";
143
- else if (item.indexOf("r") !== -1)
144
- activeStyle.horizontalAlignment = "right";
145
- else if (item.indexOf("j") !== -1)
146
- activeStyle.horizontalAlignment = "justify";
147
- } else {
148
- text.push(item);
149
- }
150
- } else if (Array.isArray(item)) {
151
- var nestedFormat = mtextContentAndFormattingToTextAndStyle(
152
- item,
153
- entity,
154
- configParams
155
- );
156
- text.push(nestedFormat.text);
157
- } else if (typeof item === "object") {
158
- if (item["S"] && item["S"].length === 3) {
159
- text.push(item["S"][0] + "/" + item["S"][2]);
160
- } else {
161
- // not yet supported.
162
- }
161
+ let activeStyle = {
162
+ horizontalAlignment: "left",
163
+ textHeight: entity.height,
164
+ };
165
+ var text = [];
166
+ for (let item of textAndControlChars) {
167
+ if (typeof item === "string") {
168
+ if (item.startsWith("pxq") && item.endsWith(";")) {
169
+ if (item.indexOf("c") !== -1)
170
+ activeStyle.horizontalAlignment = "center";
171
+ else if (item.indexOf("l") !== -1)
172
+ activeStyle.horizontalAlignment = "left";
173
+ else if (item.indexOf("r") !== -1)
174
+ activeStyle.horizontalAlignment = "right";
175
+ else if (item.indexOf("j") !== -1)
176
+ activeStyle.horizontalAlignment = "justify";
177
+ } else {
178
+ text.push(item);
179
+ }
180
+ } else if (Array.isArray(item)) {
181
+ var nestedFormat = mtextContentAndFormattingToTextAndStyle(
182
+ item,
183
+ entity,
184
+ configParams
185
+ );
186
+ text.push(nestedFormat.text);
187
+ } else if (typeof item === "object") {
188
+ if (item["S"] && item["S"].length === 3) {
189
+ text.push(item["S"][0] + "/" + item["S"][2]);
190
+ } else {
191
+ // not yet supported.
192
+ }
193
+ }
163
194
  }
164
- }
165
- return {
166
- text: text.join(),
167
- style: activeStyle,
168
- };
195
+ return {
196
+ text: text.join(),
197
+ style: activeStyle,
198
+ };
169
199
  }
170
200
 
171
201
  function drawArc(recordDxf, entity, group, key, configParams) {
172
- let startAngle, endAngle;
173
- if (entity.type === "CIRCLE") {
174
- startAngle = entity.startAngle || 0;
175
- endAngle = startAngle + 2 * Math.PI;
176
- } else {
177
- startAngle = entity.startAngle;
178
- endAngle = entity.endAngle;
179
- }
180
- let curve = new THREE.ArcCurve(
181
- entity.center.x,
182
- parseFloat(entity.center.y),
183
- entity.radius,
184
- startAngle,
185
- endAngle
186
- );
187
- let points = curve.getPoints(32);
188
-
189
- let list = [];
190
- for (let i = 0; i < points.length; i++) {
191
- list.push(points[i].x);
192
- list.push(-parseFloat(points[i].y));
193
- }
194
- let width = 0.2;
195
- group.push({
196
- type:'polyline',
197
- points:list,
198
- name: key.replace(/\s*/g, ""),
199
- entityId: key,
200
- stroke: configParams ? configParams.color : "#000",
201
- customColor: configParams ? configParams.color : "",
202
- strokeWidth: width,
203
- visible: configParams ? configParams.visible :true,
204
- oldstrokeLength:width
205
- });
206
- // if(group.attrs.isBlock){
207
- // let scale=group.scale();
208
- // width=width/Math.abs(scale.x);
209
- // }
210
- // let line = new Konva.Line({
211
- // name: key.replace(/\s*/g, ""),
212
- // entityId: key,
213
- // isGroup: false,
214
- // points: list,
215
- // stroke: configParams ? configParams.color : "#000",
216
- // customColor: configParams ? configParams.color : "",
217
- // strokeWidth: width,
218
- // lineCap: "round",
219
- // lineJoin: "round",
220
- // visible: configParams ? configParams.visible :true,
221
- // oldstrokeLength:width
222
- // });
223
- // group.add(line);
202
+
203
+ let color=entity.color;
204
+ let rgb=decimalToRGBHex(color);
205
+ console.log(rgb);
206
+ let hex=rgb.hex;
207
+ let startAngle, endAngle;
208
+ if (entity.type === "CIRCLE") {
209
+ startAngle = entity.startAngle || 0;
210
+ endAngle = startAngle + 2 * Math.PI;
211
+ } else {
212
+ startAngle = entity.startAngle;
213
+ endAngle = entity.endAngle;
214
+ }
215
+ let curve = new THREE.ArcCurve(
216
+ entity.center.x,
217
+ parseFloat(entity.center.y),
218
+ entity.radius,
219
+ startAngle,
220
+ endAngle
221
+ );
222
+ let points = curve.getPoints(32);
223
+
224
+ let list = [];
225
+ for (let i = 0; i < points.length; i++) {
226
+ list.push(points[i].x);
227
+ list.push(-parseFloat(points[i].y));
228
+ }
229
+ let width = 0.2;
230
+ group.push({
231
+ type:'polyline',
232
+ points:list,
233
+ name: key.replace(/\s*/g, ""),
234
+ entityId: key,
235
+ stroke: hex,
236
+ customColor: configParams ? configParams.color : "",
237
+ strokeWidth: width,
238
+ visible: configParams ? configParams.visible :true,
239
+ oldstrokeLength:width
240
+ });
241
+ // if(group.attrs.isBlock){
242
+ // let scale=group.scale();
243
+ // width=width/Math.abs(scale.x);
244
+ // }
245
+ // let line = new Konva.Line({
246
+ // name: key.replace(/\s*/g, ""),
247
+ // entityId: key,
248
+ // isGroup: false,
249
+ // points: list,
250
+ // stroke: configParams ? configParams.color : "#000",
251
+ // customColor: configParams ? configParams.color : "",
252
+ // strokeWidth: width,
253
+ // lineCap: "round",
254
+ // lineJoin: "round",
255
+ // visible: configParams ? configParams.visible :true,
256
+ // oldstrokeLength:width
257
+ // });
258
+ // group.add(line);
224
259
  }
225
260
 
226
261
  function drawEllpse(recordDxf, entity, group, key, configParams) {
227
- let xrad = Math.sqrt(
228
- Math.pow(parseFloat(entity.majorAxisEndPoint.x), 2) +
229
- Math.pow(parseFloat(entity.majorAxisEndPoint.y), 2)
230
- );
231
- let yrad = xrad * parseFloat(entity.axisRatio);
232
- let rotation = Math.atan2(
233
- parseFloat(entity.majorAxisEndPoint.y),
234
- parseFloat(entity.majorAxisEndPoint.x)
235
- );
236
-
237
- let curve = new THREE.EllipseCurve(
238
- parseFloat(entity.center.x),
239
- parseFloat(entity.center.y),
240
- xrad,
241
- yrad,
242
- parseFloat(entity.startAngle),
243
- parseFloat(entity.endAngle),
244
- false, // Always counterclockwise
245
- rotation
246
- );
247
- let points = curve.getPoints(200);
248
- let list = [];
249
- for (let i = 0; i < points.length; i++) {
250
- list.push(points[i].x);
251
- list.push(-parseFloat(points[i].y));
252
- }
253
- let width = 0.2;
254
- group.push({
255
- type:'polyline',
256
- points:list,
257
- name: key.replace(/\s*/g, ""),
258
- entityId: key,
259
- stroke: configParams ? configParams.color : "#000",
260
- customColor: configParams ? configParams.color : "",
261
- strokeWidth: width,
262
- visible: configParams ? configParams.visible : true,
263
- oldstrokeLength:width
264
- });
265
- // let line = new Konva.Line({
266
- // name: key.replace(/\s*/g, ""),
267
- // entityId: key,
268
- // isGroup: false,
269
- // points: list,
270
- // stroke: configParams ? configParams.color : "#000",
271
- // customColor: configParams ? configParams.color : "",
272
- // strokeWidth: width,
273
- // lineCap: "round",
274
- // lineJoin: "round",
275
- // visible: configParams ? configParams.visible : true,
276
- // oldstrokeLength:width
277
-
278
- // });
279
- // group.add(line);
262
+ let xrad = Math.sqrt(
263
+ Math.pow(parseFloat(entity.majorAxisEndPoint.x), 2) +
264
+ Math.pow(parseFloat(entity.majorAxisEndPoint.y), 2)
265
+ );
266
+ let yrad = xrad * parseFloat(entity.axisRatio);
267
+ let rotation = Math.atan2(
268
+ parseFloat(entity.majorAxisEndPoint.y),
269
+ parseFloat(entity.majorAxisEndPoint.x)
270
+ );
271
+ console.log(entity.startAngle);
272
+ console.log(entity.endAngle);
273
+ let curve = new THREE.EllipseCurve(
274
+ parseFloat(entity.center.x),
275
+ parseFloat(entity.center.y),
276
+ xrad,
277
+ yrad,
278
+ parseFloat(entity.startAngle),
279
+ parseFloat(entity.endAngle),
280
+ false, // Always counterclockwise
281
+ rotation
282
+ );
283
+ let points = curve.getPoints(200);
284
+ let list = [];
285
+ for (let i = 0; i < points.length; i++) {
286
+ list.push(points[i].x);
287
+ list.push(-parseFloat(points[i].y));
288
+ }
289
+ let width = 0.2;
290
+
291
+
292
+
293
+ group.push({
294
+ type:'polyline',
295
+ points:list,
296
+ name: key.replace(/\s*/g, ""),
297
+ entityId: key,
298
+ stroke: configParams ? configParams.color : "#000",
299
+ customColor: configParams ? configParams.color : "",
300
+ strokeWidth: width,
301
+ visible: configParams ? configParams.visible : true,
302
+ oldstrokeLength:width
303
+ });
304
+ // let line = new Konva.Line({
305
+ // name: key.replace(/\s*/g, ""),
306
+ // entityId: key,
307
+ // isGroup: false,
308
+ // points: list,
309
+ // stroke: configParams ? configParams.color : "#000",
310
+ // customColor: configParams ? configParams.color : "",
311
+ // strokeWidth: width,
312
+ // lineCap: "round",
313
+ // lineJoin: "round",
314
+ // visible: configParams ? configParams.visible : true,
315
+ // oldstrokeLength:width
316
+
317
+ // });
318
+ // group.add(line);
280
319
  }
281
320
  function drawLine(recordDxf, entity, group, key, configParams) {
282
- let x1 = entity.vertices[0].x;
283
- let y1 = entity.vertices[0].y;
284
- let x2 = entity.vertices[1].x;
285
- let y2 = entity.vertices[1].y;
286
- let width = 0.2;
287
- group.push({
288
- type:"line",
289
- x1:x1,
290
- x2:x2,
291
- y1:y1,
292
- y2:y2,
293
- name: key.replace(/\s*/g, ""),
294
- entityId: key,
295
- isGroup: false,
296
- stroke: configParams ? configParams.color : "#000",
297
- customColor: configParams ? configParams.color : "#000",
298
- strokeWidth: width,
299
- visible: configParams ? configParams.visible : true,
300
- oldstrokeLength:width,
301
- });
302
- // if(group.attrs.isBlock){
303
- // let scale=group.scale();
304
- // width=width/Math.abs(scale.x);
305
- // }
306
- // let line = new Konva.Line({
307
- // name: key.replace(/\s*/g, ""),
308
- // entityId: key,
309
- // isGroup: false,
310
- // points: [x1, -parseFloat(y1), parseFloat(x2), -parseFloat(y2)],
311
- // stroke: configParams ? configParams.color : "#000",
312
- // customColor: configParams ? configParams.color : "",
313
- // strokeWidth: width,
314
- // //lineCap: "round",
315
- // //lineJoin: "round",
316
- // visible: configParams ? configParams.visible : true,
317
- // oldstrokeLength:width,
318
- // handle:entity.handle
319
-
320
- // });
321
-
322
- // group.add(line);
321
+ let color=entity.color;
322
+ let rgb=decimalToRGBHex(color);
323
+ console.log(rgb);
324
+ let hex=rgb.hex;
325
+ let x1 = entity.vertices[0].x;
326
+ let y1 = entity.vertices[0].y;
327
+ let x2 = entity.vertices[1].x;
328
+ let y2 = entity.vertices[1].y;
329
+ let width = 0.2;
330
+ group.push({
331
+ type:"line",
332
+ x1:x1,
333
+ x2:x2,
334
+ y1:y1,
335
+ y2:y2,
336
+ name: key.replace(/\s*/g, ""),
337
+ entityId: key,
338
+ isGroup: false,
339
+ stroke: hex,
340
+ customColor: configParams ? configParams.color : "",
341
+ strokeWidth: width,
342
+ visible: configParams ? configParams.visible : true,
343
+ oldstrokeLength:width,
344
+ });
345
+ // if(group.attrs.isBlock){
346
+ // let scale=group.scale();
347
+ // width=width/Math.abs(scale.x);
348
+ // }
349
+ // let line = new Konva.Line({
350
+ // name: key.replace(/\s*/g, ""),
351
+ // entityId: key,
352
+ // isGroup: false,
353
+ // points: [x1, -parseFloat(y1), parseFloat(x2), -parseFloat(y2)],
354
+ // stroke: configParams ? configParams.color : "#000",
355
+ // customColor: configParams ? configParams.color : "",
356
+ // strokeWidth: width,
357
+ // //lineCap: "round",
358
+ // //lineJoin: "round",
359
+ // visible: configParams ? configParams.visible : true,
360
+ // oldstrokeLength:width,
361
+ // handle:entity.handle
362
+
363
+ // });
364
+
365
+ // group.add(line);
323
366
  }
324
367
  function drawText(recordDxf, entity, group, key, configParams) {
325
- let text = entity.text;
326
- let fontSize=0;
327
- if(key==0){
328
- fontSize=entity.textHeight+0.35;
329
- }else{
330
- fontSize=entity.textHeight+0.35;
331
- }
332
- let startPoint = entity.startPoint;
333
- let x = startPoint.x;
334
- let y = startPoint.y;
335
- let dim = new Konva.Text({
336
- x: parseFloat(x),
337
- y: -parseFloat(y),
338
- text: text,
339
- fontSize: fontSize,
340
- fill: configParams ? configParams.color : "#000",
341
- customColor: configParams ? configParams.color : "#000",
342
- name: key.replace(/\s*/g, ""),
343
- entityId: key,
344
- fontFamily: "SimSun",
345
- visible: configParams ? configParams.visible : true,
346
- stroke: configParams ? configParams.color : "#000",
347
- strokeWidth:0.1,
348
- });
349
- if (entity.rotation) {
350
-
351
- if(entity.rotation==90||parseInt(entity.rotation)==90||parseInt(entity.rotation)==89||parseInt(entity.rotation)==450) {
352
- dim.attrs.x = parseFloat(x) - fontSize;
353
- }
354
- if(entity.rotation==270||parseInt(entity.rotation)==270)
355
- {
356
- dim.attrs.x = parseFloat(x) + fontSize;
357
- }
358
- if(entity.rotation==180||parseInt(entity.rotation)==180){
359
- dim.attrs.y= -parseFloat(y) - fontSize;
360
- }
361
- if(entity.rotation==360||parseFloat(entity.rotation)==360){
368
+
369
+ let color=entity.color;
370
+ let rgb=decimalToRGBHex(color);
371
+ console.log(rgb);
372
+ let hex=rgb.hex;
373
+
374
+ if(hex=='#FFFFFF'){
375
+ hex='#000';
376
+ }
377
+ let text = entity.text;
378
+ let fontSize=0;
379
+ if(key==0){
380
+ fontSize=entity.textHeight+0.35;
381
+ }else{
382
+ fontSize=entity.textHeight+0.35;
383
+ }
384
+
385
+
386
+ let startPoint = entity.startPoint;
387
+ let x = startPoint.x;
388
+ let y = startPoint.y;
389
+ let dim = new Konva.Text({
390
+ x: parseFloat(x),
391
+ y: -parseFloat(y),
392
+ text: text,
393
+ fontSize: fontSize,
394
+ fill: hex,
395
+ customColor: configParams ? configParams.color : "",
396
+ name: key.replace(/\s*/g, ""),
397
+ entityId: key,
398
+ fontFamily: "SimSun",
399
+ visible: configParams ? configParams.visible : true,
400
+ stroke: hex,
401
+ strokeWidth:0.1,
402
+ });
403
+ if (entity.rotation) {
404
+ if(entity.rotation==90||parseInt(entity.rotation)==90||parseInt(entity.rotation)==89||parseInt(entity.rotation)==450) {
405
+ dim.attrs.x = parseFloat(x) - fontSize;
406
+ }
407
+ if(entity.rotation==270||parseInt(entity.rotation)==270)
408
+ {
409
+ dim.attrs.x = parseFloat(x) + fontSize;
410
+ }
411
+ if(entity.rotation==180||parseInt(entity.rotation)==180){
412
+ dim.attrs.y= -parseFloat(y) - fontSize;
413
+ }
414
+ if(entity.rotation==360||parseFloat(entity.rotation)==360){
415
+ dim.attrs.y= -parseFloat(y) - fontSize;
416
+ }
417
+ dim.attrs.rotation = 360-entity.rotation ;
418
+ }else{
362
419
  dim.attrs.y= -parseFloat(y) - fontSize;
363
- }
364
-
365
-
366
- dim.attrs.rotation = 360-entity.rotation ;
367
-
368
- }else{
369
- dim.attrs.y= -parseFloat(y) - fontSize;
370
- }
371
- if (entity.xScale) {
372
- dim.attrs.fontSize =(fontSize+0.35)* entity.xScale;
373
- }
374
- group.push({
375
- "type":'text',
376
- 'obj':dim,
377
- })
378
- // group.add(dim);
420
+ }
421
+ if (entity.xScale) {
422
+ dim.attrs.fontSize =(fontSize+0.35)* entity.xScale;
423
+ }
424
+
425
+ let width=dim.getTextWidth()
426
+ //let clientRect=dim.getClientRect()
427
+ //let clientWidth=clientRect.width;
428
+
429
+ if(entity.halign){
430
+ if(entity.halign==1){
431
+ dim.attrs.x= dim.attrs.x-(width*1.15/2);
432
+
433
+ }
434
+ }
435
+ //dim.attrs.x= dim.attrs.x-parseFloat(2);
436
+ group.push({
437
+ "type":'text',
438
+ 'obj':dim,
439
+ })
440
+ // group.add(dim);
441
+ }
442
+
443
+ function drawHatch(recordDxf,entity,group,key,configParams){
444
+
445
+ console.log("hatch");
379
446
  }
447
+
380
448
  function drawLwLine(recordDxf, entity, group, key, configParams) {
381
- let closed = entity.shape;
382
- let list=[];
383
- for(let i =0;i<entity.vertices.length;i++){
384
- list.push(entity.vertices[i].x);
385
- list.push(-parseFloat(entity.vertices[i].y));
386
- }
387
- let width = 0.2;
449
+ let color=entity.color;
450
+ let rgb=decimalToRGBHex(color);
451
+ console.log(rgb);
452
+ let hex=rgb.hex;
453
+
454
+ if(hex=='#FFFFFF'){
455
+ hex='#000';
456
+ }
457
+ let closed = entity.shape;
458
+ let list=[];
459
+ for(let i =0;i<entity.vertices.length;i++){
460
+ list.push(entity.vertices[i].x);
461
+ list.push(-parseFloat(entity.vertices[i].y));
462
+ }
463
+ let width = 0.2;
388
464
  if(entity.width){
389
- width=width+parseFloat(entity.width);
465
+ width=width+parseFloat(entity.width);
390
466
  }else{
391
- width=0.2;
467
+ width=0.2;
392
468
  }
393
469
  group.push({
394
- type:"polyline",
395
- points:list,
396
- closed:closed,
397
- name: key.replace(/\s*/g, ""),
398
- entityId: key,
399
- stroke: configParams ? configParams.color : "#000",
400
- customColor: configParams ? configParams.color : "#000",
401
- strokeWidth: width,
402
- visible: configParams ? configParams.visible : true,
403
- oldstrokeLength:width,
470
+ type:"polyline",
471
+ points:list,
472
+ closed:closed,
473
+ name: key.replace(/\s*/g, ""),
474
+ entityId: key,
475
+ stroke: hex,
476
+ customColor: configParams ? configParams.color : "",
477
+ strokeWidth: width,
478
+ visible: configParams ? configParams.visible : true,
479
+ oldstrokeLength:width,
404
480
  })
405
- // let line = new Konva.Line({
406
- // name: key.replace(/\s*/g, ""),
407
- // entityId: key,
408
- // isGroup: false,
409
- // points: list,
410
- // stroke: configParams ? configParams.color : "#000",
411
- // customColor: configParams ? configParams.color : "",
412
- // strokeWidth: width,
413
- // visible: configParams ? configParams.visible : true,
414
- // closed:closed,
415
- // oldstrokeLength:width,
416
- // handle:entity.handle
417
-
418
- // });
419
- // group.add(line);
481
+ // let line = new Konva.Line({
482
+ // name: key.replace(/\s*/g, ""),
483
+ // entityId: key,
484
+ // isGroup: false,
485
+ // points: list,
486
+ // stroke: configParams ? configParams.color : "#000",
487
+ // customColor: configParams ? configParams.color : "",
488
+ // strokeWidth: width,
489
+ // visible: configParams ? configParams.visible : true,
490
+ // closed:closed,
491
+ // oldstrokeLength:width,
492
+ // handle:entity.handle
493
+
494
+ // });
495
+ // group.add(line);
420
496
  }
421
497
  function drawSpline(recordDxf, entity, group, key, configParams) {
422
- let points = getBSplinePolyline(
423
- entity.controlPoints,
424
- entity.degreeOfSplineCurve,
425
- entity.knotValues,
426
- 100
427
- );
428
- let list = [];
429
- for (let i = 0; i < points.length; i++) {
430
- list.push(points[i].x);
431
- list.push(-parseFloat(points[i].y));
432
- }
433
- let width = 0.1;
434
- group.push({
435
- type:'polyline',
436
- points: list,
437
- name: key.replace(/\s*/g, ""),
438
- entityId: key,
439
- isGroup: false,
440
- stroke: configParams ? configParams : "#000",
441
- customColor: configParams ? configParams.color : "#000",
442
- strokeWidth: width,
443
- visible: configParams ? configParams.visible : true,
444
- oldstrokeLength: width
445
- });
446
- // let line = new Konva.Line({
447
- // name: key.replace(/\s*/g, ""),
448
- // entityId: key,
449
- // isGroup: false,
450
- // points: list,
451
- // stroke: configParams ? configParams : "#000",
452
- // customColor: configParams ? configParams.color : "",
453
- // strokeWidth: width,
454
- // lineCap: "round",
455
- // lineJoin: "round",
456
- // visible: configParams ? configParams.visible : true,
457
- // oldstrokeLength:width
458
- // });
459
- // group.add(line);
498
+ let points = getBSplinePolyline(
499
+ entity.controlPoints,
500
+ entity.degreeOfSplineCurve,
501
+ entity.knotValues,
502
+ 100
503
+ );
504
+ let list = [];
505
+ for (let i = 0; i < points.length; i++) {
506
+ list.push(points[i].x);
507
+ list.push(-parseFloat(points[i].y));
508
+ }
509
+ let width = 0.1;
510
+ group.push({
511
+ type:'polyline',
512
+ points: list,
513
+ name: key.replace(/\s*/g, ""),
514
+ entityId: key,
515
+ isGroup: false,
516
+ stroke: configParams ? configParams : "#000",
517
+ customColor: configParams ? configParams.color : "",
518
+ strokeWidth: width,
519
+ visible: configParams ? configParams.visible : true,
520
+ oldstrokeLength: width
521
+ });
522
+ // let line = new Konva.Line({
523
+ // name: key.replace(/\s*/g, ""),
524
+ // entityId: key,
525
+ // isGroup: false,
526
+ // points: list,
527
+ // stroke: configParams ? configParams : "#000",
528
+ // customColor: configParams ? configParams.color : "",
529
+ // strokeWidth: width,
530
+ // lineCap: "round",
531
+ // lineJoin: "round",
532
+ // visible: configParams ? configParams.visible : true,
533
+ // oldstrokeLength:width
534
+ // });
535
+ // group.add(line);
460
536
  }
461
537
  function drawInsert(recordDxf, entities, group, key, configParams, konvaLayer) {
462
- if (recordDxf.blocks[entities.name]) {
463
- let group2 = new Konva.Group({
464
- x: 0,
465
- y: 0,
466
- name: key.replace(/\s*/g, ""),
467
- isBlock: true,
468
- blockName: entities.name,
469
- entityId: key,
470
- isGroup: true,
471
- visible: true,
472
- });
473
- let entity = entities;
474
- let block = recordDxf.blocks[entities.name];
475
- if (entity.rotation) {
476
- group2.rotation(360-entity.rotation);
477
- }
538
+ if (recordDxf.blocks[entities.name]) {
539
+ let group2 = new Konva.Group({
540
+ x: 0,
541
+ y: 0,
542
+ name: key.replace(/\s*/g, ""),
543
+ isBlock: true,
544
+ blockName: entities.name,
545
+ entityId: key,
546
+ isGroup: true,
547
+ visible: true,
548
+ });
549
+ let entity = entities;
550
+ let block = recordDxf.blocks[entities.name];
551
+ if (entity.rotation) {
552
+ group2.rotation(360-entity.rotation);
553
+ }
478
554
 
479
- if (entity.xScale) {
480
- group2.scale({ x: entity.xScale, y: entity.yScale });
481
- }
482
- if (entity.yScale) {
483
- group2.scale({ x: entity.xScale, y: entity.yScale });
484
- }
485
- if (entity.position) {
486
- group2.attrs.x = parseFloat(entity.position.x);
487
- group2.attrs.y = -parseFloat(entity.position.y);
555
+ if (entity.xScale) {
556
+ group2.scale({ x: entity.xScale, y: entity.yScale });
557
+ }
558
+ if (entity.yScale) {
559
+ group2.scale({ x: entity.xScale, y: entity.yScale });
560
+ }
561
+ if (entity.position) {
562
+ group2.attrs.x = parseFloat(entity.position.x);
563
+ group2.attrs.y = -parseFloat(entity.position.y);
564
+ }
565
+ if(entity.position.x<0){
566
+ group2.attrs.x = parseFloat(entity.position.x)*-1;
567
+ if(entity.xScale<0){
568
+ group2.scale({ x: Math.abs(entity.xScale), y: entity.yScale });
569
+ }
570
+ }
571
+ if(block.entities==undefined){
572
+ return ;
573
+ }
574
+ for (let j = 0; j < block.entities.length; j++) {
575
+ let type = block.entities[j].type;
576
+ handleFn(type, recordDxf, block.entities[j], group2, key, configParams, konvaLayer)
577
+ }
578
+ group.add(group2)
579
+ // 区分块 因为有的块里面包含块 不区分会对点击定位有影响
580
+ group.attrs.isMix = true
581
+ konvaLayer.add(group)
488
582
  }
489
- if(entity.position.x<0){
490
- group2.attrs.x = parseFloat(entity.position.x)*-1;
491
- if(entity.xScale<0){
492
- group2.scale({ x: Math.abs(entity.xScale), y: entity.yScale });
493
- }
494
- }
495
- if(block.entities==undefined){
496
- return ;
497
- }
498
- for (let j = 0; j < block.entities.length; j++) {
499
- let type = block.entities[j].type;
500
- handleFn(type, recordDxf, block.entities[j], group2, key, configParams, konvaLayer)
501
- }
502
- group.add(group2)
503
- // 区分块 因为有的块里面包含块 不区分会对点击定位有影响
504
- group.attrs.isMix = true
505
- konvaLayer.add(group)
506
- }
507
583
  }
584
+
585
+ let color= [
586
+ '0,0,0',//1
587
+ '255,0,0',//2
588
+ '255,255,0',//3
589
+ '0,255,0',//4
590
+ '0,255,255',//5
591
+ '0,0,255',//6
592
+ '255,0,255',//7
593
+ '255,255,255',//8
594
+ '128,128,128',//9
595
+ '192,192,192',//10
596
+ '255,0,0',//11
597
+ '255,120,112',//12
598
+ '192,0,0',//13
599
+ '207,103,96',//14
600
+ '144,0,0',//15
601
+ '144,72,79',//16
602
+ '127,0,0',//17
603
+ '112,56,48',//18
604
+ '79,0,0',//19
605
+ '79,39,32',//20
606
+ '255,56,0',//21
607
+ '255,159,127',//22
608
+ '192,48,0',//23
609
+ '207,127,96',//24
610
+ '144,32,0',//25
611
+ '144,88,64',// 26
612
+ '112,24,0',//27
613
+ '127,72,63',//28
614
+ '79,16,0',//29
615
+ '64,40,31',//30
616
+ '255,127,0',//31
617
+ '255,191,127',//32
618
+ '207,103,0',//33
619
+ '192,151,96',//34
620
+ '159,72,0',//35
621
+ '144,112,79',//36
622
+ '127,63,0',//37
623
+ '127,95,63',//38
624
+ '64,32,0',//39
625
+ '64,55,31',//40
626
+ '255,191,0',// 41
627
+ '255,216,127',//42
628
+ '207,152,0',//43
629
+ '192,175,96',//44
630
+ '144,112,0',//45
631
+ '144,128,64',//46
632
+ '112,88,0',//47
633
+ '127,111,63',//48
634
+ '64,55,0',//49
635
+ '64,63,31',//50
636
+ '255,255,0',//51
637
+ '255,255,112',//52
638
+ '207,200,0',//53
639
+ '192,200,96',//54
640
+ '144,151,0',//55
641
+ '144,151,64',//56
642
+ '144,152,0',//57
643
+ '127,120,63',//58
644
+ '79,72,0',//59
645
+ '79,72,32',//60
646
+ '191,255,0',//61
647
+ '208,255,112',//62
648
+ '144,200,0',//63
649
+ '176,200,96',//64
650
+ '111,151,0',//65
651
+ '128,151,79',//66
652
+ '95,127,0',//67
653
+ '111,127,63',//68
654
+ '48,72,0',//69
655
+ '63,72,31',//70
656
+ '127,255,0',//71
657
+ '191,255,127',//72
658
+ '95,200,0',//73
659
+ '159,200,96',//74
660
+ '64,151,0',//75
661
+ '111,151,64',//76
662
+ '63,120,0',//77
663
+ '95,127,63',//78
664
+ '31,72,0',//79
665
+ '48,72,32',//80
666
+ '63,255,0',//81
667
+ '159,255,127',//82
668
+ '47,200,0',//83
669
+ '127,200,96',//84
670
+ '31,151,0',//85
671
+ '80,151,64',//86
672
+ '31,127,0',//87
673
+ '79,127,63',//88
674
+ '15,72,0',//89
675
+ '47,72,32',//90
676
+ '0,255,0',//91
677
+ '127,255,127',//92
678
+ '0,200,0',//93
679
+ '95,200,95',//94
680
+ '0,151,0',//95
681
+ '79,151,79',//96
682
+ '0,127,0',//97
683
+ '63,127,63',//98
684
+ '0,72,0',//99
685
+ '32,72,32',//100
686
+ '0,255,63',//101
687
+ '127,255,159',//102
688
+ '0,200,47',//103
689
+ '95,200,112',//104
690
+ '0,151,32',//105
691
+ '64,151,95',//106
692
+ '0,120,31',//107
693
+ '63,127,79',//108
694
+ '0,72,15',//109
695
+ '32,72,47',//110
696
+ '0,255,127',//111
697
+ '127,255,191',//112
698
+ '0,200,96',//113
699
+ '95,200,144',//114
700
+ '0,151,64',//115
701
+ '79,151,111',//116
702
+ '0,127,63',//117
703
+ '63,127,95',//118
704
+ '0,72,32',//119
705
+ '31,72,48',//120
706
+ '0,255,191',//121
707
+ '127,255,223',//122
708
+ '0,200,144',//123
709
+ '95,200,175',//124
710
+ '0,151,111',//125
711
+ '79,151,128',//126
712
+ '0,120,95',//127
713
+ '63,127,111',//128
714
+ '0,72,48',//129
715
+ '32,72,63',//130
716
+ '0,255,255',//131
717
+ '127,255,255',//132
718
+ '0,200,207',//133
719
+ '96,200,207',//134
720
+ '0,151,144',//135
721
+ '64,151,144',//136
722
+ '0,127,127',//137
723
+ '63,127,127',//138
724
+ '0,72,79',//139
725
+ '32,72,79',//140
726
+ '0,191,255',//141
727
+ '127,223,255',//142
728
+ '0,152,207',//143
729
+ '96,176,207',//144
730
+ '0,111,144',//145
731
+ '64,128,144',//146
732
+ '0,95,127',//147
733
+ '63,111,127',//148
734
+ '0,55,64',//149
735
+ '31,63,64',//150
736
+ '0,127,255',//151
737
+ '112,184,255',//152
738
+ '0,96,192',//153
739
+ '96,151,207',//154
740
+ '0,72,159',//155
741
+ '79,112,144',//156
742
+ '0,63,127',//157
743
+ '63,95,127',//158
744
+ '0,39,79',//159
745
+ '32,56,79',//160
746
+ '0,63,255',//161
747
+ '127,159,255',//162
748
+ '0,48,207',//163
749
+ '96,127,207',//164
750
+ '0,39,159',//165
751
+ '64,95,144',//166
752
+ '0,24,127',//167
753
+ '63,79,127',//168
754
+ '0,15,64',//169
755
+ '32,47,79',//170
756
+ '0,0,255',//171
757
+ '127,127,255',//172
758
+ '0,0,207',//173
759
+ '95,96,192',//174
760
+ '0,0,144',//175
761
+ '79,72,159',//176
762
+ '0,0,127',//177
763
+ '63,63,127',//178
764
+ '0,0,64',//179
765
+ '32,39,79',//180
766
+ '63,0,255',//181
767
+ '159,127,255',//182
768
+ '47,0,192',//183
769
+ '127,103,207',//184
770
+ '32,0,144',//185
771
+ '80,72,144',//186
772
+ '31,0,127',//187
773
+ '79,63,127',//188
774
+ '15,0,79',//189
775
+ '47,39,79',//190
776
+ '127,0,255',//191
777
+ '191,127,255',//192
778
+ '96,0,207',//193
779
+ '144,103,207',//194
780
+ '79,0,144',//195
781
+ '111,72,144',//196
782
+ '63,0,127',//197
783
+ '95,63,127',//198
784
+ '31,0,64',//199
785
+ '48,39,79',//200
786
+ '191,0,255',//201
787
+ '223,127,255',//202
788
+ '144,0,207',//203
789
+ '175,96,192',//204
790
+ '111,0,144',//205
791
+ '128,72,159',//206
792
+ '95,0,127',//207
793
+ '96,56,112',//208
794
+ '48,0,64',//209
795
+ '64,39,79',//210
796
+ '255,0,255',//211
797
+ '255,127,255',//212
798
+ '192,0,192',//213
799
+ '192,96,192',//214
800
+ '144,0,144',//215
801
+ '144,72,144',//216
802
+ '127,0,127',//217
803
+ '127,63,127',//218
804
+ '79,0,79',//219
805
+ '64,32,64',//220
806
+ '255,0,191',//221
807
+ '255,127,223',//222
808
+ '192,0,144',//223
809
+ '192,96,175',//224
810
+ '144,0,111',//225
811
+ '144,72,128',//226
812
+ '127,0,95',//227
813
+ '127,56,111',//228
814
+ '64,0,48',//229
815
+ '79,39,63',//230
816
+ '255,0,127',//231
817
+ '255,127,191',//232
818
+ '192,0,95',//233
819
+ '192,96,144',//234
820
+ '159,0,79',//235
821
+ '144,72,111',//236
822
+ '127,0,63',//237
823
+ '127,63,95',//238
824
+ '64,0,31',//239
825
+ '64,32,48',//240
826
+ '255,0,63',//241
827
+ '255,127,159',//242
828
+ '207,0,48',//243
829
+ '207,103,127',//244
830
+ '144,0,32',//245
831
+ '144,72,95',//246
832
+ '127,0,31',//247
833
+ '127,63,79',//248
834
+ '79,0,15',//249
835
+ '64,32,47',//250
836
+ '47,47,47',//251
837
+ '80,88,80',//252
838
+ '128,128,128',//253
839
+ '175,175,175',//254
840
+ '208,215,208',//255
841
+ '255,255,255'//256
842
+ ];