Fix:修复大边框尺寸的渲染问题,包括重叠,内容不居中

This commit is contained in:
wanglin2 2023-08-28 08:49:45 +08:00
parent 1b0646af6d
commit e36e238c2f

View File

@ -62,14 +62,9 @@ export default class Shape {
// 创建形状节点 // 创建形状节点
createShape() { createShape() {
const shape = this.node.getShape() const shape = this.node.getShape()
const borderWidth = this.node.getBorderWidth()
let { width, height } = this.node
width -= borderWidth
height -= borderWidth
let node = null let node = null
// 矩形 // 矩形
if (shape === CONSTANTS.SHAPE.RECTANGLE) { if (shape === CONSTANTS.SHAPE.RECTANGLE) {
// node = new Rect().size(width, height)
node = this.createRect() node = this.createRect()
} else if (shape === CONSTANTS.SHAPE.DIAMOND) { } else if (shape === CONSTANTS.SHAPE.DIAMOND) {
// 菱形 // 菱形
@ -99,9 +94,21 @@ export default class Shape {
return node return node
} }
// 创建矩形TODO // 获取节点减去边框宽度的尺寸
createRect() { getNodeSize() {
const borderWidth = this.node.getBorderWidth()
let { width, height } = this.node let { width, height } = this.node
width -= borderWidth
height -= borderWidth
return {
width,
height
}
}
// 创建矩形
createRect() {
let { width, height } = this.getNodeSize()
let borderRadius = this.node.style.merge('borderRadius') let borderRadius = this.node.style.merge('borderRadius')
return new Path().plot(` return new Path().plot(`
M${borderRadius},0 M${borderRadius},0
@ -121,7 +128,7 @@ export default class Shape {
// 创建菱形 // 创建菱形
createDiamond() { createDiamond() {
let { width, height } = this.node let { width, height } = this.getNodeSize()
let halfWidth = width / 2 let halfWidth = width / 2
let halfHeight = height / 2 let halfHeight = height / 2
let topX = halfWidth let topX = halfWidth
@ -144,7 +151,7 @@ export default class Shape {
createParallelogram() { createParallelogram() {
let { paddingX } = this.node.getPaddingVale() let { paddingX } = this.node.getPaddingVale()
paddingX = paddingX || this.node.shapePadding.paddingX paddingX = paddingX || this.node.shapePadding.paddingX
let { width, height } = this.node let { width, height } = this.getNodeSize()
return new Polygon().plot([ return new Polygon().plot([
[paddingX, 0], [paddingX, 0],
[width, 0], [width, 0],
@ -155,7 +162,7 @@ export default class Shape {
// 创建圆角矩形 // 创建圆角矩形
createRoundedRectangle() { createRoundedRectangle() {
let { width, height } = this.node let { width, height } = this.getNodeSize()
let halfHeight = height / 2 let halfHeight = height / 2
return new Path().plot(` return new Path().plot(`
M${halfHeight},0 M${halfHeight},0
@ -169,7 +176,7 @@ export default class Shape {
// 创建八角矩形 // 创建八角矩形
createOctagonalRectangle() { createOctagonalRectangle() {
let w = 5 let w = 5
let { width, height } = this.node let { width, height } = this.getNodeSize()
return new Polygon().plot([ return new Polygon().plot([
[0, w], [0, w],
[w, 0], [w, 0],
@ -186,7 +193,7 @@ export default class Shape {
createOuterTriangularRectangle() { createOuterTriangularRectangle() {
let { paddingX } = this.node.getPaddingVale() let { paddingX } = this.node.getPaddingVale()
paddingX = paddingX || this.node.shapePadding.paddingX paddingX = paddingX || this.node.shapePadding.paddingX
let { width, height } = this.node let { width, height } = this.getNodeSize()
return new Polygon().plot([ return new Polygon().plot([
[paddingX, 0], [paddingX, 0],
[width - paddingX, 0], [width - paddingX, 0],
@ -201,7 +208,7 @@ export default class Shape {
createInnerTriangularRectangle() { createInnerTriangularRectangle() {
let { paddingX } = this.node.getPaddingVale() let { paddingX } = this.node.getPaddingVale()
paddingX = paddingX || this.node.shapePadding.paddingX paddingX = paddingX || this.node.shapePadding.paddingX
let { width, height } = this.node let { width, height } = this.getNodeSize()
return new Polygon().plot([ return new Polygon().plot([
[0, 0], [0, 0],
[width, 0], [width, 0],
@ -214,7 +221,7 @@ export default class Shape {
// 创建椭圆 // 创建椭圆
createEllipse() { createEllipse() {
let { width, height } = this.node let { width, height } = this.getNodeSize()
let halfWidth = width / 2 let halfWidth = width / 2
let halfHeight = height / 2 let halfHeight = height / 2
return new Path().plot(` return new Path().plot(`
@ -227,7 +234,7 @@ export default class Shape {
// 创建圆 // 创建圆
createCircle() { createCircle() {
let { width, height } = this.node let { width, height } = this.getNodeSize()
let halfWidth = width / 2 let halfWidth = width / 2
let halfHeight = height / 2 let halfHeight = height / 2
return new Path().plot(` return new Path().plot(`