特殊形状更改宽高重新计算内部内容
This commit is contained in:
@@ -28,6 +28,7 @@
|
||||
before="W"
|
||||
type="number"
|
||||
v-model="data.width"
|
||||
:disabled="whDisabled"
|
||||
@input="onInpot"
|
||||
@change="onChange"
|
||||
/>
|
||||
@@ -37,6 +38,7 @@
|
||||
before="H"
|
||||
type="number"
|
||||
v-model="data.height"
|
||||
:disabled="whDisabled"
|
||||
@input="onInpot"
|
||||
@change="onChange"
|
||||
/>
|
||||
@@ -97,6 +99,7 @@
|
||||
}
|
||||
})
|
||||
const id = computed(() => props.object.info.id)
|
||||
const whDisabled = computed(() => ['path', 'line'].includes(props.object.type))
|
||||
|
||||
const data = reactive({
|
||||
top: 0,
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="depth-input" :class="{ color: isColor }">
|
||||
<div class="depth-input" :class="{ color: isColor, disabled: attrs.disabled }">
|
||||
<span class="decorate"></span>
|
||||
<span v-show="icon" class="icon">
|
||||
<svg-icon :name="icon" :size="iconSize" />
|
||||
@@ -28,6 +28,7 @@
|
||||
<input readonly :value="colorObj.color" @copy.stop @keydown.stop />
|
||||
<span class="decorate marginl"></span>
|
||||
<input
|
||||
v-bind="attrs"
|
||||
class="alpha"
|
||||
type="number"
|
||||
:value="Math.round(colorObj.alpha * 100)"
|
||||
@@ -230,11 +231,15 @@
|
||||
height: var(--depth-input-height, 2rem);
|
||||
background-color: var(--depth-input-bg-color, #fff);
|
||||
padding: 0 0.4rem 0 0.2rem;
|
||||
&.disabled,
|
||||
&.disabled * {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&.color {
|
||||
--depth-input-decorate-margin-right: 1rem;
|
||||
--depth-input-input-margin-right: 1rem;
|
||||
--depth-input-input-font-align: left;
|
||||
--depth-input-after-color: rgba(181, 181, 181, 1);
|
||||
// --depth-input-after-color: rgba(181, 181, 181, 1);
|
||||
}
|
||||
> .decorate {
|
||||
width: 0.2rem;
|
||||
|
||||
@@ -348,6 +348,7 @@ export class LayerManager {
|
||||
const height = options?.height || 100
|
||||
delete options.points
|
||||
const starObject = new fabric.Polygon(getStarArr(width, height), {
|
||||
type: "star",
|
||||
fill: '#000',
|
||||
strokeWidth: 0,
|
||||
...(options || {}),
|
||||
|
||||
@@ -3,6 +3,7 @@ import { fabric } from 'fabric-with-all'
|
||||
import { createId } from '../../tools/tools'
|
||||
import { exportObjectsToImage, exportObjectToThumbnail } from '../tools/exportMethod'
|
||||
import { OperationType } from '../tools/layerHelper'
|
||||
import { getArrowPath, getLinePath, cloneObjects, getStarArr } from '../tools/canvasMethod'
|
||||
|
||||
export const FillSourceToBase64 = (source) => {
|
||||
if (source?.toDataURL) {
|
||||
@@ -215,6 +216,21 @@ export class ObjectManager {
|
||||
async updateProperty(id: string, options: any, isRecord: boolean) {
|
||||
const object = this.canvasManager.getObjectById(id)
|
||||
if (!object) return null
|
||||
const type = object.type
|
||||
const isWidth = object.hasOwnProperty('width')
|
||||
const isHeight = object.hasOwnProperty('height')
|
||||
if (isWidth || isHeight) {
|
||||
let width = options.width
|
||||
let height = options.height
|
||||
if (type === "polygon") {
|
||||
if (object.points.length === 10) {// 五角星
|
||||
options.points = getStarArr(width, height)
|
||||
}
|
||||
} else if (type === "ellipse") {// 椭圆
|
||||
options.rx = width / 2
|
||||
options.ry = height / 2
|
||||
}
|
||||
}
|
||||
object.set(options);
|
||||
this.canvasManager.renderAll()
|
||||
if (isRecord) {
|
||||
|
||||
Reference in New Issue
Block a user