{{ selectColor.hex }}
@@ -117,6 +117,7 @@ export default defineComponent({
})
const getpalletListDom = reactive({
})
+ const palletRef = ref(null)
watch(()=>palletData.color_,(newVal:any)=>{
if(!newVal?.rgba?.r)return
if(palletData.color?.gradient?.gradientShow){
@@ -221,7 +222,7 @@ export default defineComponent({
// this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
- let gradientWidth = (document.querySelector('.pallet .color_setting_operate_bg') as any).clientWidth
+ let gradientWidth = (palletRef.value.querySelector('.color_setting_operate_bg') as any).clientWidth
let position = {
x:event.clientX,
left:event.target.style.left?event.target.style.left.split('%')[0]:0
@@ -276,8 +277,8 @@ export default defineComponent({
// 点击外部区域关闭颜色选择器
const handleClickOutside = (event: Event) => {
const target = event.target as HTMLElement;
- const colorSettingBlock = document.querySelector('.color_setting_block');
- const palletColo = document.querySelector('.palletColo');
+ const colorSettingBlock = palletRef.value.querySelector('.color_setting_block');
+ const palletColo = palletRef.value.querySelector('.palletColo');
// 如果点击的是 .palletColo 或 .color_setting_block 内部，则不关闭
if (palletData.palletShow && colorSettingBlock &&
@@ -294,7 +295,7 @@ export default defineComponent({
nextTick().then(()=>{
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
- let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
+ let dropperDom = palletRef.value.getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {
@@ -322,7 +323,7 @@ export default defineComponent({
return{
...toRefs(palletData),
...toRefs(getpalletListDom),
-
+ palletRef,
openPallet,
selectImgItem,
setOperate,
@@ -614,6 +615,7 @@ export default defineComponent({
position: absolute;
content: "";
top: 0.2rem;
+ left: 0;
width: 1rem;
height: 1rem;
border-radius: 50%;
diff --git a/src/lang/cn.ts b/src/lang/cn.ts
index 6f49adb0..eb4a8584 100644
--- a/src/lang/cn.ts
+++ b/src/lang/cn.ts
@@ -1433,7 +1433,42 @@ export default {
selectTexture: '选择要使用的纹理',
DeleteTexture: '删除纹理',
TextureSettings: '纹理设置',
- TextureSelector: '纹理选择'
+ TextureSelector: '纹理选择',
+ // 混合模式
+ CompositeNormal: '正常',
+ CompositeNormalTip: '正常：默认，新图形覆盖原内容',
+ CompositeDarken: '变暗',
+ CompositeDarkenTip: '变暗：取暗部颜色',
+ CompositeMultiply: '正片叠底',
+ CompositeMultiplyTip: '正片叠底：图像变暗',
+ CompositeColorBurn: '颜色加深',
+ CompositeColorBurnTip: '颜色加深：增加对比度，变暗底层颜色',
+ CompositeLighten: '变亮',
+ CompositeLightenTip: '变亮：取亮部颜色',
+ CompositeScreen: '滤色',
+ CompositeScreenTip: '滤色：图像变亮',
+ CompositeColorDodge: '颜色减淡',
+ CompositeColorDodgeTip: '颜色减淡：降低对比度，加亮底层颜色',
+ CompositeLighter: '颜色减淡（添加）',
+ CompositeLighterTip: '颜色减淡（添加）：重叠部分亮度叠加',
+ CompositeOverlay: '叠加',
+ CompositeOverlayTip: '叠加：高光效果',
+ CompositeSoftLight: '柔光',
+ CompositeSoftLightTip: '柔光：混合效果',
+ CompositeHardLight: '强光',
+ CompositeHardLightTip: '强光：高光效果',
+ CompositeDifference: '差值',
+ CompositeDifferenceTip: '差值：取两图像颜色差',
+ CompositeExclusion: '排除',
+ CompositeExclusionTip: '排除：取两图像颜色差的绝对值',
+ CompositeHue: '色相',
+ CompositeHueTip: '色相：保留原图像颜色，改变新图像色相',
+ CompositeSaturation: '饱和度',
+ CompositeSaturationTip: '饱和度：保留原图像色相，改变新图像饱和度',
+ CompositeColor: '颜色',
+ CompositeColorTip: '颜色：保留原图像饱和度，改变新图像颜色',
+ CompositeLuminosity: '亮度',
+ CompositeLuminosityTip: '亮度：保留原图像颜色，改变新图像亮度',
},
speedList: {
High: '高级',
diff --git a/src/lang/en.ts b/src/lang/en.ts
index df0bb91d..bce9408c 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -1433,7 +1433,42 @@ export default {
selectTexture: 'Select the texture you want to use',
DeleteTexture: 'Delete Texture',
TextureSettings: 'Texture Settings',
- TextureSelector: 'Texture Selector'
+ TextureSelector: 'Texture Selector',
+ // 混合模式
+ CompositeNormal: 'Normal',
+ CompositeNormalTip: 'Normal: Default, new graphics cover original content',
+ CompositeDarken: 'Darken',
+ CompositeDarkenTip: 'Darken: Take the darkest color',
+ CompositeMultiply: 'Multiply',
+ CompositeMultiplyTip: 'Multiply: Darken the image',
+ CompositeColorBurn: 'Color Burn',
+ CompositeColorBurnTip: 'Color Burn: Increase contrast and darken the bottom color',
+ CompositeLighten: 'Lighten',
+ CompositeLightenTip: 'Lighten: Take the brightest color',
+ CompositeScreen: 'Screen',
+ CompositeScreenTip: 'Screen: Lighten the image',
+ CompositeColorDodge: 'Color Dodge',
+ CompositeColorDodgeTip: 'Color Dodge: Reduce contrast and lighten the bottom color',
+ CompositeLighter: 'Color Dodge (Add)',
+ CompositeLighterTip: 'Color Dodge (Add): Add the brightness of the overlapping parts',
+ CompositeOverlay: 'Overlay',
+ CompositeOverlayTip: 'Overlay: Highlight effect',
+ CompositeSoftLight: 'Soft Light',
+ CompositeSoftLightTip: 'Soft Light: Blend effect',
+ CompositeHardLight: 'Hard Light',
+ CompositeHardLightTip: 'Hard Light: Highlight effect',
+ CompositeDifference: 'Difference',
+ CompositeDifferenceTip: 'Difference: Take the color difference between the two images',
+ CompositeExclusion: 'Exclusion',
+ CompositeExclusionTip: 'Exclusion: Take the absolute value of the color difference between the two images',
+ CompositeHue: 'Hue',
+ CompositeHueTip: 'Hue: Preserve the original image color and change the hue of the new image',
+ CompositeSaturation: 'Saturation',
+ CompositeSaturationTip: 'Saturation: Preserve the original image hue and change the saturation of the new image',
+ CompositeColor: 'Color',
+ CompositeColorTip: 'Color: Preserve the original image saturation and change the color of the new image',
+ CompositeLuminosity: 'Luminosity',
+ CompositeLuminosityTip: 'Luminosity: Preserve the original image color and change the luminosity of the new image',
},
speedList: {
High: 'High',