Fix:修复大边框尺寸的渲染问题,包括重叠,内容不居中
This commit is contained in:
parent
1b0646af6d
commit
e36e238c2f
@ -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(`
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user