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