|
@@ -17753,11 +17753,12 @@
|
|
this.textBorderThick = options.textBorderThick || 0;
|
|
this.textBorderThick = options.textBorderThick || 0;
|
|
this.fontface = 'Arial';
|
|
this.fontface = 'Arial';
|
|
this.fontsize = options.fontsize || 16;
|
|
this.fontsize = options.fontsize || 16;
|
|
|
|
+ this.lineSpace = options.lineSpace;
|
|
this.textBorderColor = options.textBorderColor ? Common.CloneObject(options.textBorderColor) : {
|
|
this.textBorderColor = options.textBorderColor ? Common.CloneObject(options.textBorderColor) : {
|
|
r: 0,
|
|
r: 0,
|
|
g: 0,
|
|
g: 0,
|
|
b: 0,
|
|
b: 0,
|
|
- a: 0.0
|
|
|
|
|
|
+ a: 1.0
|
|
};
|
|
};
|
|
this.backgroundColor = options.backgroundColor ? Common.CloneObject(options.backgroundColor) : {
|
|
this.backgroundColor = options.backgroundColor ? Common.CloneObject(options.backgroundColor) : {
|
|
r: 255,
|
|
r: 255,
|
|
@@ -17820,125 +17821,53 @@
|
|
setUniforms(name, value) {
|
|
setUniforms(name, value) {
|
|
this.sprite.setUniforms(name, value);
|
|
this.sprite.setUniforms(name, value);
|
|
}
|
|
}
|
|
- updateTexture1() {
|
|
|
|
- var canvas = document.createElement('canvas');
|
|
|
|
- var context = canvas.getContext('2d');
|
|
|
|
- var r = window.devicePixelRatio;
|
|
|
|
- context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface;
|
|
|
|
-
|
|
|
|
- //context["font-weight"] = 100; //语法与 CSS font 属性相同。
|
|
|
|
-
|
|
|
|
- //this.text = '啊啊啊啊啊啊fag'
|
|
|
|
-
|
|
|
|
- var metrics = context.measureText(this.text);
|
|
|
|
- var textWidth = metrics.width;
|
|
|
|
- var margin = (this.margin ? new Vector2().copy(this.margin) : new Vector2(this.fontsize, Math.max(this.fontsize * 0.4, 10))).clone().multiplyScalar(r);
|
|
|
|
- var spriteWidth = 2 * margin.x + textWidth + 2 * this.rectBorderThick * r;
|
|
|
|
- var spriteHeight = 2 * margin.y + this.fontsize * r + 2 * this.rectBorderThick * r;
|
|
|
|
- context.canvas.width = spriteWidth;
|
|
|
|
- context.canvas.height = spriteHeight;
|
|
|
|
- context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface;
|
|
|
|
-
|
|
|
|
- /* let diff = 2//针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2
|
|
|
|
- context.textBaseline = "middle"
|
|
|
|
- */
|
|
|
|
- var expand = Math.max(1, Math.pow(this.fontsize / 16, 1.3)) * r; // 针对英文大部分在baseLine之上所以降低一点,或者可以识别当不包含jgqp时才加这个值
|
|
|
|
-
|
|
|
|
- //canvas原点在左上角
|
|
|
|
- context.textBaseline = 'alphabetic'; // "middle" //设置文字基线。当起点y设置为0时,只有该线以下的部分被绘制出来。middle时文字显示一半(但是对该字体所有字的一半,有的字是不一定显示一半的,尤其汉字),alphabetic时是英文字母的那条基线。
|
|
|
|
-
|
|
|
|
- //let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent; // 当前文本字符串在这个字体下用的实际高度
|
|
|
|
-
|
|
|
|
- //文字y向距离从textBaseline向上算
|
|
|
|
- var actualBoundingBoxAscent = metrics.actualBoundingBoxAscent == void 0 ? this.fontsize * r * 0.8 : metrics.actualBoundingBoxAscent; //有的流览器没有。只能大概给一个
|
|
|
|
- var y = actualBoundingBoxAscent + margin.y + expand;
|
|
|
|
- //console.log(this.text, 'y' , y, 'actualBoundingBoxAscent', metrics.actualBoundingBoxAscent,'expand',expand )
|
|
|
|
-
|
|
|
|
- // border color
|
|
|
|
- context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' + this.borderColor.b + ',' + this.borderColor.a + ')';
|
|
|
|
- var rectBorderThick = this.rectBorderThick * r;
|
|
|
|
- context.lineWidth = rectBorderThick;
|
|
|
|
- // background color
|
|
|
|
- context.fillStyle = 'rgba(' + this.backgroundColor.r + ',' + this.backgroundColor.g + ',' + this.backgroundColor.b + ',' + this.backgroundColor.a + ')';
|
|
|
|
- this.roundRect(context, rectBorderThick / 2, rectBorderThick / 2, spriteWidth - rectBorderThick, spriteHeight - rectBorderThick, this.borderRadius * r);
|
|
|
|
-
|
|
|
|
- // text color
|
|
|
|
- if (this.textBorderThick) {
|
|
|
|
- context.strokeStyle = 'rgba(' + this.textBorderColor.r + ',' + this.textBorderColor.g + ',' + this.textBorderColor.b + ',' + this.textBorderColor.a + ')';
|
|
|
|
- context.lineWidth = this.textBorderThick * r;
|
|
|
|
- context.strokeText(this.text, rectBorderThick + margin.x, y /* spriteHeight/2 + diff */);
|
|
|
|
- }
|
|
|
|
- context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' + this.textColor.b + ',' + this.textColor.a + ')';
|
|
|
|
- context.fillText(this.text, rectBorderThick + margin.x, y /* spriteHeight/2 + diff */); //x,y
|
|
|
|
-
|
|
|
|
- var texture = new Texture(canvas);
|
|
|
|
- texture.minFilter = LinearFilter;
|
|
|
|
- texture.magFilter = LinearFilter;
|
|
|
|
- texture.needsUpdate = true;
|
|
|
|
- //this.material.needsUpdate = true;
|
|
|
|
-
|
|
|
|
- if (this.sprite.material.map) {
|
|
|
|
- this.sprite.material.map.dispose();
|
|
|
|
- }
|
|
|
|
- this.sprite.material.map = texture;
|
|
|
|
- this.sprite.scale.set(spriteWidth * 0.01 / r, spriteHeight * 0.01 / r, 1.0);
|
|
|
|
- }
|
|
|
|
updateTexture() {
|
|
updateTexture() {
|
|
|
|
+ //canvas原点在左上角
|
|
var canvas = document.createElement('canvas');
|
|
var canvas = document.createElement('canvas');
|
|
var context = canvas.getContext('2d');
|
|
var context = canvas.getContext('2d');
|
|
- var r = window.devicePixelRatio;
|
|
|
|
- context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface;
|
|
|
|
-
|
|
|
|
- //context["font-weight"] = 100; //语法与 CSS font 属性相同。
|
|
|
|
|
|
+ var r = window.devicePixelRatio; //不乘会模糊
|
|
|
|
+ context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface; //context["font-weight"] = 100; //语法与 CSS font 属性相同。
|
|
|
|
|
|
- //this.text = '啊啊啊啊啊啊fag'
|
|
|
|
var textMaxWidth = 0,
|
|
var textMaxWidth = 0,
|
|
infos = [];
|
|
infos = [];
|
|
|
|
+ context.textBaseline = 'alphabetic'; // "middle" //设置文字基线。当起点y设置为0时,只有该线以下的部分被绘制出来。middle时文字显示一半(但是对该字体所有字的一半,有的字是不一定显示一半的,尤其汉字),alphabetic时是英文字母的那条基线。
|
|
|
|
+
|
|
|
|
+ var textHeightAll = 0;
|
|
for (var text of this.text) {
|
|
for (var text of this.text) {
|
|
var metrics = context.measureText(text);
|
|
var metrics = context.measureText(text);
|
|
var textWidth = metrics.width;
|
|
var textWidth = metrics.width;
|
|
infos.push(metrics);
|
|
infos.push(metrics);
|
|
textMaxWidth = Math.max(textMaxWidth, textWidth);
|
|
textMaxWidth = Math.max(textMaxWidth, textWidth);
|
|
- }
|
|
|
|
- var margin = (this.margin ? new Vector2().copy(this.margin) : new Vector2(this.fontsize, Math.max(this.fontsize * 0.4, 10))).clone().multiplyScalar(r);
|
|
|
|
- var lineSpace = (this.fontsize + margin.y) * 0.5;
|
|
|
|
- var spriteWidth = 2 * margin.x + textMaxWidth + 2 * (this.rectBorderThick + this.textBorderThick) * r; //还要考虑this.textshadowColor,太麻烦了不写了
|
|
|
|
- var spriteHeight = 2 * margin.y + (this.fontsize + this.textBorderThick * 2) * r * this.text.length + 2 * this.rectBorderThick * r + lineSpace * (this.text.length - 1);
|
|
|
|
|
|
+ textHeightAll += metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent; //文字真实高度
|
|
|
|
+ }
|
|
|
|
+ var margin = (this.margin ? new Vector2().copy(this.margin) : new Vector2(this.fontsize, this.fontsize)).multiplyScalar(r);
|
|
|
|
+ var lineSpace = (this.lineSpace || this.fontsize * 0.5) * r;
|
|
|
|
+ var rectBorderThick = this.rectBorderThick * r,
|
|
|
|
+ textBorderThick = this.textBorderThick * r;
|
|
|
|
+ var spriteWidth = 2 * (margin.x + rectBorderThick + textBorderThick) + textMaxWidth; //还要考虑this.textshadowColor,太麻烦了不写了
|
|
|
|
+ var spriteHeight = 2 * (margin.y + rectBorderThick + textBorderThick * this.text.length) + lineSpace * (this.text.length - 1) + textHeightAll;
|
|
context.canvas.width = spriteWidth;
|
|
context.canvas.width = spriteWidth;
|
|
context.canvas.height = spriteHeight;
|
|
context.canvas.height = spriteHeight;
|
|
- context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface;
|
|
|
|
|
|
+ context.font = this.fontWeight + ' ' + this.fontsize * r + 'px ' + this.fontface; //为何要再写一遍??
|
|
|
|
+
|
|
if (spriteWidth > 4000) {
|
|
if (spriteWidth > 4000) {
|
|
console.error('spriteWidth', spriteWidth, 'spriteHeight', spriteHeight, this.fontsize, r, this.text, margin);
|
|
console.error('spriteWidth', spriteWidth, 'spriteHeight', spriteHeight, this.fontsize, r, this.text, margin);
|
|
}
|
|
}
|
|
-
|
|
|
|
- /* let diff = 2//针对英文大部分在baseLine之上所以降低一点(metrics.fontBoundingBoxAscent - metrics.fontBoundingBoxDescent) / 2
|
|
|
|
- context.textBaseline = "middle"
|
|
|
|
- */
|
|
|
|
- var expand = Math.max(1, Math.pow(this.fontsize / 16, 1.3)) * r; // 针对英文大部分在baseLine之上所以降低一点,或者可以识别当不包含jgqp时才加这个值
|
|
|
|
-
|
|
|
|
- //canvas原点在左上角
|
|
|
|
- context.textBaseline = 'alphabetic'; // "middle" //设置文字基线。当起点y设置为0时,只有该线以下的部分被绘制出来。middle时文字显示一半(但是对该字体所有字的一半,有的字是不一定显示一半的,尤其汉字),alphabetic时是英文字母的那条基线。
|
|
|
|
|
|
+ var expand = 0; //Math.max(1, Math.pow(this.fontsize / 16, 1.1)) * r // 针对英文大部分在baseLine之上所以降低一点,或者可以识别当不包含jgqp时才加这个值 . 但即使都是汉字也会不同,如"哈哈"和"粉色",前者居中后者不
|
|
|
|
|
|
// border color
|
|
// border color
|
|
context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' + this.borderColor.b + ',' + this.borderColor.a + ')';
|
|
context.strokeStyle = 'rgba(' + this.borderColor.r + ',' + this.borderColor.g + ',' + this.borderColor.b + ',' + this.borderColor.a + ')';
|
|
- var rectBorderThick = this.rectBorderThick * r;
|
|
|
|
context.lineWidth = rectBorderThick;
|
|
context.lineWidth = rectBorderThick;
|
|
- // background color
|
|
|
|
context.fillStyle = 'rgba(' + this.backgroundColor.r + ',' + this.backgroundColor.g + ',' + this.backgroundColor.b + ',' + this.backgroundColor.a + ')';
|
|
context.fillStyle = 'rgba(' + this.backgroundColor.r + ',' + this.backgroundColor.g + ',' + this.backgroundColor.b + ',' + this.backgroundColor.a + ')';
|
|
this.roundRect(context, rectBorderThick / 2, rectBorderThick / 2, spriteWidth - rectBorderThick, spriteHeight - rectBorderThick, this.borderRadius * r);
|
|
this.roundRect(context, rectBorderThick / 2, rectBorderThick / 2, spriteWidth - rectBorderThick, spriteHeight - rectBorderThick, this.borderRadius * r);
|
|
context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' + this.textColor.b + ',' + this.textColor.a + ')';
|
|
context.fillStyle = 'rgba(' + this.textColor.r + ',' + this.textColor.g + ',' + this.textColor.b + ',' + this.textColor.a + ')';
|
|
- var y = margin.y + expand;
|
|
|
|
|
|
+ var y = margin.y + rectBorderThick;
|
|
for (var i = 0; i < this.text.length; i++) {
|
|
for (var i = 0; i < this.text.length; i++) {
|
|
- //let actualHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent // 当前文本字符串在这个字体下用的实际高度
|
|
|
|
-
|
|
|
|
//文字y向距离从textBaseline向上算
|
|
//文字y向距离从textBaseline向上算
|
|
- var actualBoundingBoxAscent = infos[i].actualBoundingBoxAscent == void 0 ? this.fontsize * r * 0.8 : infos[i].actualBoundingBoxAscent; //有的流览器没有。只能大概给一个
|
|
|
|
- y += actualBoundingBoxAscent + this.textBorderThick;
|
|
|
|
- //console.log(actualBoundingBoxAscent)
|
|
|
|
-
|
|
|
|
- //console.log(this.text, 'y' , y, 'actualBoundingBoxAscent', metrics.actualBoundingBoxAscent,'expand',expand )
|
|
|
|
|
|
+ var actualBoundingBoxAscent = infos[i].fontBoundingBoxAscent == void 0 ? this.fontsize * r * 0.8 : infos[i].fontBoundingBoxAscent; //有的流览器没有。只能大概给一个
|
|
|
|
+ y += actualBoundingBoxAscent + textBorderThick;
|
|
var textLeftSpace = this.textAlign == 'center' ? (textMaxWidth - infos[i].width) / 2 : this.textAlign == 'left' ? 0 : textMaxWidth - infos[i].width;
|
|
var textLeftSpace = this.textAlign == 'center' ? (textMaxWidth - infos[i].width) / 2 : this.textAlign == 'left' ? 0 : textMaxWidth - infos[i].width;
|
|
- var x = this.rectBorderThick + margin.x + textLeftSpace;
|
|
|
|
|
|
+ var x = rectBorderThick + textBorderThick + margin.x + textLeftSpace;
|
|
|
|
|
|
// text color
|
|
// text color
|
|
if (this.textBorderThick) {
|
|
if (this.textBorderThick) {
|
|
@@ -17949,11 +17878,12 @@
|
|
if (this.textshadowColor) {
|
|
if (this.textshadowColor) {
|
|
context.shadowOffsetX = 0;
|
|
context.shadowOffsetX = 0;
|
|
context.shadowOffsetY = 0;
|
|
context.shadowOffsetY = 0;
|
|
- context.shadowColor = this.textshadowColor;
|
|
|
|
- context.shadowBlur = 12 * r;
|
|
|
|
|
|
+ context.shadowColor = this.textshadowColor; //'red'
|
|
|
|
+ context.shadowBlur = (this.textShadowBlur || this.fontSize / 3) * r;
|
|
}
|
|
}
|
|
context.fillText(this.text[i], x, y);
|
|
context.fillText(this.text[i], x, y);
|
|
- y += lineSpace;
|
|
|
|
|
|
+ var actualBoundingBoxDescent = infos[i].fontBoundingBoxDescent == void 0 ? this.fontsize * r * 0.2 : infos[i].fontBoundingBoxDescent;
|
|
|
|
+ y += actualBoundingBoxDescent + textBorderThick + lineSpace;
|
|
}
|
|
}
|
|
var texture = new Texture(canvas);
|
|
var texture = new Texture(canvas);
|
|
texture.minFilter = LinearFilter;
|
|
texture.minFilter = LinearFilter;
|
|
@@ -69658,26 +69588,29 @@
|
|
//model.traverse(e=>e.material && setOp(e, opacity))
|
|
//model.traverse(e=>e.material && setOp(e, opacity))
|
|
model.traverse(mesh => {
|
|
model.traverse(mesh => {
|
|
if (mesh.material) {
|
|
if (mesh.material) {
|
|
- if (mesh.material.originOpacity == void 0) {
|
|
|
|
- mesh.material.originOpacity = mesh.material.opacity;
|
|
|
|
- }
|
|
|
|
- mesh.material.opacity = mesh.material.originOpacity * opacity;
|
|
|
|
- if (mesh.material.opacity < 1) {
|
|
|
|
- mesh.material.transparent = true;
|
|
|
|
- /* if(model.isPointcloud){
|
|
|
|
- mesh.changePointOpacity(realOpacity)
|
|
|
|
- }else{
|
|
|
|
- mesh.material.opacity = realOpacity
|
|
|
|
- } */
|
|
|
|
|
|
+ var mats = mesh.material instanceof Array ? mesh.material : [mesh.material];
|
|
|
|
+ mats.forEach(mat => {
|
|
|
|
+ if (mat.originOpacity == void 0) {
|
|
|
|
+ mat.originOpacity = mesh.material.opacity;
|
|
|
|
+ }
|
|
|
|
+ mat.opacity = mat.originOpacity * opacity;
|
|
|
|
+ if (mat.opacity < 1) {
|
|
|
|
+ mat.transparent = true;
|
|
|
|
+ /* if(model.isPointcloud){
|
|
|
|
+ mesh.changePointOpacity(realOpacity)
|
|
|
|
+ }else{
|
|
|
|
+ mesh.material.opacity = realOpacity
|
|
|
|
+ } */
|
|
|
|
|
|
- mesh.renderOrder = Potree.config.renderOrders.model + 1;
|
|
|
|
- //mesh.material.depthWrite = false
|
|
|
|
- } else {
|
|
|
|
- mesh.material.transparent = false;
|
|
|
|
- mesh.renderOrder = Potree.config.renderOrders.model;
|
|
|
|
- //mesh.material.depthWrite = true
|
|
|
|
- }
|
|
|
|
- mesh.material.depthWrite = mesh.material.opacity > 0.3;
|
|
|
|
|
|
+ mesh.renderOrder = Potree.config.renderOrders.model + 1; //如果是一个mesh多个material咋整? obj的。 暂时默认全部opacity一样吧
|
|
|
|
+ //mesh.material.depthWrite = false
|
|
|
|
+ } else {
|
|
|
|
+ mat.transparent = false;
|
|
|
|
+ mesh.renderOrder = Potree.config.renderOrders.model;
|
|
|
|
+ //mesh.material.depthWrite = true
|
|
|
|
+ }
|
|
|
|
+ mat.depthWrite = mat.opacity > 0.3;
|
|
|
|
+ });
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|
|
@@ -80178,6 +80111,10 @@
|
|
var mats = mesh.material instanceof Array ? mesh.material : [mesh.material];
|
|
var mats = mesh.material instanceof Array ? mesh.material : [mesh.material];
|
|
mats.forEach(mat => {
|
|
mats.forEach(mat => {
|
|
if (mat.map) {
|
|
if (mat.map) {
|
|
|
|
+ if (!mat.map.image) {
|
|
|
|
+ console.error('!mat.map.image ??'); //obj可能会
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
texArea += mat.map.image.width * mat.map.image.height;
|
|
texArea += mat.map.image.width * mat.map.image.height;
|
|
//visi && (visiTexArea += a)
|
|
//visi && (visiTexArea += a)
|
|
}
|
|
}
|