diff --git a/package-lock.json b/package-lock.json
index fdec0894..13c07ca9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8391,6 +8391,11 @@
"integrity": "sha1-e15vfmZen7QfMAB+2eDUHpf7IUA=",
"dev": true
},
+ "html-to-image": {
+ "version": "1.9.0",
+ "resolved": "https://registry.npmmirror.com/html-to-image/-/html-to-image-1.9.0.tgz",
+ "integrity": "sha512-9gaDCIYg62Ek07F2pBk76AHgYZ2gxq2YALU7rK3gNCqXuhu6cWzsOQqM7qGbjZiOzxGzrU1deDqZpAod2NEwbA=="
+ },
"html-webpack-plugin": {
"version": "3.2.0",
"resolved": "https://registry.npmmirror.com/html-webpack-plugin/download/html-webpack-plugin-3.2.0.tgz?cache=0&sync_timestamp=1635212553430&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fhtml-webpack-plugin%2Fdownload%2Fhtml-webpack-plugin-3.2.0.tgz",
diff --git a/package.json b/package.json
index cb503335..7b0eb460 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"dexie": "^3.0.3",
"file-saver": "^2.0.5",
"hfmath": "0.0.2",
+ "html-to-image": "^1.9.0",
"lodash": "^4.17.20",
"mitt": "^3.0.0",
"pinia": "^2.0.11",
diff --git a/src/assets/fonts/联盟起艺卢帅正锐黑体.ttf b/src/assets/fonts/联盟起艺卢帅正锐黑体.ttf
deleted file mode 100644
index 5a530444..00000000
Binary files a/src/assets/fonts/联盟起艺卢帅正锐黑体.ttf and /dev/null differ
diff --git a/src/assets/fonts/阿里汉仪智能黑体.ttf b/src/assets/fonts/阿里汉仪智能黑体.ttf
deleted file mode 100644
index 448b06a2..00000000
Binary files a/src/assets/fonts/阿里汉仪智能黑体.ttf and /dev/null differ
diff --git a/src/assets/styles/font.scss b/src/assets/styles/font.scss
index d49c6cb4..cc57982f 100644
--- a/src/assets/styles/font.scss
+++ b/src/assets/styles/font.scss
@@ -26,10 +26,6 @@
font-family: '素材集市康康体';
src: url(../fonts/素材集市康康体.ttf);
}
-@font-face {
- font-family: '联盟起艺卢帅正锐黑体';
- src: url(../fonts/联盟起艺卢帅正锐黑体.ttf);
-}
@font-face {
font-family: '素材集市酷方体';
src: url(../fonts/素材集市酷方体.ttf);
@@ -41,8 +37,4 @@
@font-face {
font-family: '锐字真言体';
src: url(../fonts/锐字真言体.ttf);
-}
-@font-face {
- font-family: '阿里汉仪智能黑体';
- src: url(../fonts/阿里汉仪智能黑体.ttf);
}
\ No newline at end of file
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index a6346d98..011127f2 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -19,7 +19,8 @@
@@ -74,6 +75,7 @@
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
import tinycolor, { ColorFormats } from 'tinycolor2'
import { debounce } from 'lodash'
+import { toCanvas } from 'html-to-image'
import Alpha from './Alpha.vue'
import Checkboard from './Checkboard.vue'
@@ -203,6 +205,72 @@ export default defineComponent({
updateRecentColorsCache()
}
+ const pickColor = () => {
+ const targetRef: HTMLElement | null = document.querySelector('.canvas')
+ if (!targetRef) return
+
+ const maskRef = document.createElement('div')
+ maskRef.style.cssText = 'position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 9999; cursor: wait;'
+ document.body.appendChild(maskRef)
+
+ const colorBlockRef = document.createElement('div')
+ colorBlockRef.style.cssText = 'position: absolute; top: -100px; left: -100px; width: 16px; height: 16px; border: 1px solid #000; z-index: 999'
+ maskRef.appendChild(colorBlockRef)
+
+ const { left, top } = targetRef.getBoundingClientRect()
+
+ const filter = (node: HTMLElement) => !(node.classList && node.classList.contains('operate'))
+
+ toCanvas(targetRef, { filter, fontEmbedCSS: '' }).then(canvasRef => {
+ canvasRef.style.cssText = `position: absolute; top: ${top}px; left: ${left}px; cursor: crosshair;`
+ maskRef.style.cursor = 'default'
+ maskRef.appendChild(canvasRef)
+
+ const ctx = canvasRef.getContext('2d')
+ if (!ctx) return
+
+ let currentColor = ''
+ const handleMousemove = (e: MouseEvent) => {
+ const x = e.x
+ const y = e.y
+
+ const mouseX = x - left
+ const mouseY = y - top
+
+ const [r, g, b, a] = ctx.getImageData(mouseX, mouseY, 1, 1).data
+ currentColor = `rgba(${r}, ${g}, ${b}, ${(a / 255).toFixed(2)})`
+
+ colorBlockRef.style.left = x + 10 + 'px'
+ colorBlockRef.style.top = y + 10 + 'px'
+ colorBlockRef.style.backgroundColor = currentColor
+ }
+ const handleMouseleave = () => {
+ currentColor = ''
+ colorBlockRef.style.left = '-100px'
+ colorBlockRef.style.top = '-100px'
+ colorBlockRef.style.backgroundColor = ''
+ }
+ const handleMousedown = (e: MouseEvent) => {
+ if (currentColor && e.button === 0) {
+ const tColor = tinycolor(currentColor)
+ hue.value = tColor.toHsl().h
+ color.value = tColor.toRgb()
+
+ updateRecentColorsCache()
+ }
+ document.body.removeChild(maskRef)
+
+ canvasRef.removeEventListener('mousemove', handleMousemove)
+ canvasRef.removeEventListener('mouseleave', handleMouseleave)
+ window.removeEventListener('mousedown', handleMousedown)
+ }
+
+ canvasRef.addEventListener('mousemove', handleMousemove)
+ canvasRef.addEventListener('mouseleave', handleMouseleave)
+ window.addEventListener('mousedown', handleMousedown)
+ })
+ }
+
return {
themeColors,
standardColors,
@@ -213,6 +281,7 @@ export default defineComponent({
changeColor,
selectPresetColor,
recentColors,
+ pickColor,
}
},
})
@@ -268,7 +337,23 @@ export default defineComponent({
}
.picker-field {
+ display: flex;
margin-bottom: 8px;
+
+ .straw {
+ width: 24px;
+ height: 24px;
+ margin-top: 4px;
+ margin-left: 4px;
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ font-size: 22px;
+ cursor: pointer;
+ }
+ .input {
+ flex: 1;
+ }
}
.picker-presets {
diff --git a/src/configs/font.ts b/src/configs/font.ts
index 2e3ae1cb..2961b2e1 100644
--- a/src/configs/font.ts
+++ b/src/configs/font.ts
@@ -37,9 +37,7 @@ export const WEB_FONTS = [
{ label: '站酷快乐体', value: '站酷快乐体' },
{ label: '字制区喜脉体', value: '字制区喜脉体' },
{ label: '素材集市康康体', value: '素材集市康康体' },
- { label: '联盟起艺卢帅正锐黑体', value: '联盟起艺卢帅正锐黑体' },
{ label: '素材集市酷方体', value: '素材集市酷方体' },
{ label: '途牛类圆体', value: '途牛类圆体' },
{ label: '锐字真言体', value: '锐字真言体' },
- { label: '阿里汉仪智能黑体', value: '阿里汉仪智能黑体' },
]
\ No newline at end of file
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index bc5b4bf8..682dab2b 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -86,6 +86,7 @@ import {
VolumeSmall,
VideoTwo,
Formula,
+ ElectronicPen,
} from '@icon-park/vue-next'
export default {
@@ -195,6 +196,7 @@ export default {
app.component('IconLogout', Logout)
app.component('IconClear', Clear)
app.component('IconFolderClose', FolderClose)
+ app.component('IconElectronicPen', ElectronicPen)
// 视频播放器
app.component('IconPause', Pause)