【Clip 座標切圖法】製作不切圖片的切圖法

喬治兄

& h* N7 X0 K' h( _# O* G2 |
! J+ V+ k) [0 d% M/ i+ y  w2 z5 t【Clip 座標切圖法】製作不切圖片的切圖法

參考下帖問題
[求助] 請賜教: 求 clip 圖置於左上 無切圖嘗試製作   https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36035&extra
+ z: O6 z! V+ o, R4 M; ]$ O2 S
1 V  F2 `4 U1 `! B
  b. |- n' l0 I+ n! o& z8 T
請注意綠色是左欄單字, 藍色是右欄單字
! f+ Y( F7 S6 n6 W' t& W. C很簡單的利用 負的座標 margin-top 和 margin-left 把座標移回去
附件在圖片下面  Clip_Margin.zip
% Q4 W3 ^+ V0 l: Q4 a( y- U/ J( W' d8 P感覺此方法不甚具有彈性盼各位同好先進指點更加具有彈性的處理方法
謝謝
0 N1 \' \4 z. C' P

. ?9 w& q0 p+ n6 l6 x4 q5 K
忽感 css 之強大從未對 css 深入了解, 知之甚微, 勢必還有許多能改善, 改進之處

' A( d: N$ u; l+ z/ ~9 @( W$ p此只是一個方法, 應該還很多可以實現的方法, 方式....

7 A7 ]. l! `$ r

* S: O- o. B0 J0 n; U1 D答案,始終就不會僅有少數那幾個  

% D) z# z* E7 w: y7 x$ `* z6 z

多幾次...Try Error.....您也就會有自己的答案, 自己的方法

! |2 h! {% ~% M5 g
2 r& k& A( w1 t" X

# D1 S) y; c' ?2 b
PS.


! j: d7 F' O! V2 g: s
• 此為兩欄式的 Clip 座標切圖法
• 三欄式的 Clip 座標切圖法應該也是大同小異....相同的 HTML 語法便可處理
• 若需同頁左最下單詞和右最上的釋意合併於一個詞條 或 有 當頁最右下角單詞和隔頁最
  左上角釋意合併於一個詞條應於 Excel 能計算到相接合的座標再搞成同樣形式合併之
  

- {/ W, R4 ]8 c) Xabbreviation
4 n+ J6 `  i7 u% @: a/ g<b>abbreviation</b>
<br>
" x' ]! j" o7 q6 l3 p<style>img { position: absolute;clip: rect(224px,707px,672px,0px); margin-top: -224px; margin-left: 0;}</style>
<img src="0002.png" width="1416" height="2172">
</>
* E( a+ m7 H1 ^ABC
: t3 t; M9 ]9 s/ j<b>ABC</b>
! u5 L& o4 _* n8 V<br>
<style>img { position: absolute;clip: rect(672px,707px,1424px,0px); margin-top: -672px; margin-left: 0;}</style>
<img src="0002.png" width="1416" height="2172">
</>
abet
<b>abet</b>
0 L) \% M1 ?8 t6 e<br>
. m& E% p, k+ E1 v3 T' Z. g<style>img { position: absolute;clip: rect(561px,1416px,936px,707px); margin-top: -561px; margin-left: -707px;}</style>
0 v( T9 l" o) Z<img src="0002.png" width="1416" height="2172">
</>
abeyance
5 n9 Q( M% R8 O) W* m<b>abeyance</b>
<br>
<style>img { position: absolute;clip: rect(936px,1416px,1798px,707px); margin-top: -936px; margin-left: -707px;}</style>
<img src="0002.png" width="1416" height="2172">
</>

; H8 d. R. p' M) d
6 K0 a  D6 c; ~, E: ]

8 d. |; O# n2 r" ]- U, @2 V1 W5 B. L


" b0 Z! F# b7 s9 @7 E2 x0 N; q

jonah_w

终于perfect了啊
8 s8 Z. w8 i, f- y9 v恭喜恭喜

喬治兄

& x% s7 d# h0 S) w, ^

jonah_w 发表于 2019-9-26 03:27
终于perfect了啊
! {1 c5 q1 _$ ~: ?( p* V: G恭喜恭喜

6 J! l) `2 E, i! J
jonah_w 兄:
哈..哈, 雛型模式...
% C8 G! M4 k0 F2 n5 z7 _還會再踢很多鐵板的難題....
不可能有所謂的 perfect
/ j+ j6 g. M/ p; u. T' {; s2 l
* m5 e8 i. U6 R; C/ r  X

Charlieqiu

根据MDN对clip的说法，

该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip
不过可以用clip-path，https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path

喬治兄

Charlieqiu 发表于 2019-9-26 05:20
根据MDN对clip的说法，
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip
不过可以用clip-path，htt ...

! Q/ m2 r2 s( _: ^Charlieqiu 兄:
昨晚試了一夜就是試 clip-path
很遺憾的沒試出來
也因也頭昏眼花
, c' [- M1 Q& ~" h沒再試  clip-path 方法
# |+ z: H6 h1 ]& v可能是試  clip-path 方法有誤吧

Charlieqiu

喬治兄 发表于 2019-9-26 05:39
- u" b  R  Q# J0 K! s; _Charlieqiu 兄:
昨晚試了一夜就是試 clip-path
5 M8 v- k' f+ T- S7 {' |* }" o很遺憾的沒試出來

兼容性
目前 IE 和 Edge 都不支持这个属性。Firefox 仅部分支持 clip-path，部分支持是指只支持形状和 URL(#path) 内联SVG的语法。Chrome、Safari 和 Opera 需要使用 -webkit- 的前缀兼容此属性。不支持外部的 SVG 形状。更多兼容信息可以点击这里查看 clip-path 浏览器兼容情况。
* c  k4 n. I! r* r3 H7 ?
作者：创宇前端
链接：https://juejin.im/post/5a975c14f265da4e9c635ea4
来源：掘金
  [) i0 [: R' w, x* x. e著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

clip-path还不是普遍支持的

Mandolin

谢谢推荐，喬治兄真是乐于探索啊，想必有一天会成为大师。
( Q5 Q) b/ Z+ {4 p  p6 c. Q. m/ K/ U) M
0 Q8 ~: f0 A% i$ Q8 k4 X' q/ G我没学过css，经你这推荐去了解了一下，这个clip：rect功能就是在展示图片的时候只显示指定的矩形部分吧，这可以实现不切图而进行单个词条的展示，但实际感觉并不好用，一是坐标比较难获取，二是很多图片并不规律，不知道对于这两点喬治兄有无较好的对策。

+ R8 F0 @8 d4 c- b所以相比之下切图还是目前比较好的方法，好像 chigre3 有自动根据黑色像素点定位坐标进而切图的方法，不过我不清楚。

oversky

可以参考一下相机比较网站的做法。例如：
+ N: R& X7 s/ q, `6 w/ |1 f; mhttps://is.gd/tQ3u0C
3 f7 o4 U1 P' d- L: W$ Mhttps://is.gd/1wvufo
* ?6 T& N4 }. u! W" r7 p
/ E6 Z/ R) h, P& L8 K如果能实现移动框框，
7 Q& K+ \" v  r" e3 R) O/ C那“切图”演算法的偏差就不是很严重的缺失，
可以省下校对的功夫。

喬治兄

Charlieqiu 发表于 2019-9-26 07:48
clip-path还不是普遍支持的

" c6 x' n, f! E* X8 jCharlieqiu 兄:
謝謝您提供 clip-path 前沿資訊
/ C; n3 J- V- E3 z6 n# w記得好像是我的網頁有顯示 OK
+ v& x. @  ]% U) P* Y, _mdict 沒有正確顯示而是顯示整頁
小弟會再試試
謝謝

Charlieqiu

喬治兄 发表于 2019-9-26 11:13
Charlieqiu 兄:
謝謝您提供 clip-path 前沿資訊
2 E% Z$ Y; ^- {; W9 B. t記得好像是我的網頁有顯示 OK

哈哈，我也没试过这个，只是看网上这么写着，就粘贴过来了，不过乔治兄倒提供了一个很好的思路

喬治兄

Mandolin 发表于 2019-9-26 09:42
! p: a9 N4 `, N$ E0 `: @谢谢推荐，喬治兄真是乐于探索啊，想必有一天会成为大师。
1 u) b! h( |3 f
我没学过css，经你这推荐去了解了一下，这个cli ...

% K4 [$ ?- n5 o. _
Mandolin 兄:
) h# D+ n. j3 e9 i. a. ^6 J" [非也, 非也, 僅是個人需求
整頁全文搜索 Highlight 編輯過於繁複冗長
+ D# [& e2 p9 Z& H- Z容量膨脹太大不利編輯

+ E7 b6 y6 _* [chigre3兄 的自动根据黑色像素点定位坐标进而切图的方法，是堪稱一絕的方法
小弟也很想學....
: \) H6 I% a+ y3 c3 v. s; I畢竟能夠完成想要達成的方法都是值得去試去了解的
' Z& k! Q' y# ~3 |1 p  H2 J
5 p: l8 e3 b2 R1 ~3 N6 w5 {
: ?# t# G" Q4 z: m& z8 ~5 G
' O7 Z- A& ?7 a- R* t% K% h/ j
. r! X4 V0 J- a9 B

喬治兄

oversky 发表于 2019-9-26 10:06
6 C/ X( {8 [: R6 x# A) n; U可以参考一下相机比较网站的做法。例如：
https://is.gd/tQ3u0C
) r& g! Y3 J# B0 S2 n+ Jhttps://is.gd/1wvufo

1 H2 u* j0 t) n2 C3 \謝謝仁兄提供多樣且另類的資訊
6 Y/ B1 A3 E3 R確實值得思考
謝謝
6 y3 }) I* f, T

喬治兄

Charlieqiu 发表于 2019-9-26 11:19
哈哈，我也没试过这个，只是看网上这么写着，就粘贴过来了，不过乔治兄倒提供了一个很好的思路 ...

Charlieqiu 兄:
該謝謝你才是
; \9 C0 z. q$ ?% e% l; x; h您的貼的訊息
- Q: E! |! d8 v/ U) c1 S有更明確的範例
, r8 l4 Q  {# I' `# P& M8 @! N4 N更易於理解實驗
- l; x* Z8 }( g+ m) B: q& C& ]謝謝
. ~3 R0 v1 c4 O" j8 c

chigre3

都不错  就是感觉高清图片比如8500x5800大小的 不实际切图而是用这样的方法显示局部切图会不那么快

喬治兄

chigre3 发表于 2019-9-26 14:47
$ v6 W: H  P5 n8 V5 d7 k' \% O" t都不错  就是感觉高清图片比如8500x5800大小的 不实际切图而是用这样的方法显示局部切图会不那么快 ...

) J% m, J& {8 r4 a, O# x! RChigre 兄，谢谢提供您的经验，一路套用你的方法，根本不用动脑筋就可达成，要不是因其他需求搞不定，真不想自己动脑筋，哈，哈哈哈哈哈！

喬治兄

# B. ^' z0 I: O* U5 A

chigre3 发表于 2019-9-26 14:47
都不错  就是感觉高清图片比如8500x5800大小的 不实际切图而是用这样的方法显示局部切图会不那么快 ...

$ y! i# j5 y2 B9 m: t' {
Chigre 兄:
$ |( W8 S+ ?+ r* Z

感觉高清图片比如8500x5800大小的 不实际切图而是用这样的方法显示局部切图会不那么快

此問題確實可能也存在
9 Q  C9 X2 |% t+ K1. Clip 是呼叫整個圖檔記憶體上應該是整張圖的負荷, 而您切過圖後圖檔變小, 記憶體上負荷減輕, 顯卡負荷也輕
2. 或許可以另一處理法 ,不縮圖檔, 而是把解析度減半或更多, 只需按其比例改其參數值
    但您原本的 Clip 和 margin-top, margin-left  也需改變其比例參數值
    但此又讓圖在顯示上縮半.....實難兩全也

2 d7 g5 f6 [& N. M<img src="xxx.png" width="5800" height="8500">  ==> <img src="xxx.png" width="2900" height="4250">  

+ S  P! `& K* i; M8 _<style>img { position: absolute;clip: rect(224px,707px,672px,0px); margin-top: -224px; margin-left: 0;}</style>

==><style>img { position: absolute;clip: rect(112px,353.5px,336px,0px); margin-top: -112px; margin-left: 0;}</style>
4 A" i) M: @; C( v

" T2 P2 q3 M% q" m& ?+ G5 P

wjl

喬治兄 发表于 2019-9-26 19:14
, i8 K( k- P7 C" F. uChigre 兄:

此問題確實可能也存在

' r1 ?8 a( e8 G7 I7 q+ N# z. k  PClip、Clip-path方法着重图片裁剪，不知道有没有单独调整显示窗口的办法，将图片按width: 100%;显示后，再套一个任意大小的观看窗口或显示框，窗口或显示框内显示，外部隐藏，显示效果也就相当于裁剪图片了

喬治兄

wjl 发表于 2020-8-8 22:29
- M  `; K2 G7 y" a. jClip、Clip-path方法着重图片裁剪，不知道有没有单独调整显示窗口的办法，将图片按width: 100%;显示后， ...

Clip 可以實現，您若用chigre兄的軟件取得座標，再處理一下是可行的
但若clip path , 因mdict和golidendict都是ie的內核,并不支持此標簽...無法解析 clip path
不然就試試 firetimer 兄的方法....看 css clip-path : inset     能否在 mdict and goldendict 實現


- z) e, j5 ^2 _7 L( Y- l, J[工具] Preview - 修改MDX CSS的神器，支持CSSJS实时预览... https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=39559&highlight=preview

8 d+ Q, @3 H" D但您若用 preview，則 css clip-path : inset    應該是沒問題，因 last_idol 兄 應該是可直接用你裝的 chrome 瀏覽器去解析, 若 ie 應該也是不行 ，clip 僅能座標，clip path 彈性較大，可以用比例，您可以看我那帖子有一個網站有較詳細的clip path標簽的介紹，若要應用看 inset 那個應該是蠻適用的
請賜教: 有關 css clip-path 的疑惑
0 u& b* P  |" `; ]+ v9 r! Y; ]https://www.pdawiki.com/forum/thread-36172-1-1.html
+ \" k: y) e& G% B) P9 I, J$ Y* B
7 t2 k5 s4 o, V9. 請參閱   css clip-path : inset     https://bennettfeely.com/clippy/   
10. 小弟的例子雖以 css clip-path : circle   作為實例(因參數只有一個較易實現), 但因是同屬  css clip-path 下的一 shape 成員
      若 css clip-path : circle   可行, 則 css clip-path : inset   應該也是能成的
   
/ [4 m: S5 _+ Q# t: H$ W% H4 E11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
     實為更為便利
* d+ @8 ~/ D$ u4 j0 W, I: \7 [# w1 L5 r12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html
8 x4 n: K9 G: t# K- E* Q) J& D
2 J" Q" b2 S- U$ e: f4 ^# Xaberration
6 n8 V! \# r) N6 k( H- D<b>aberration</b><br>
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
& p( G# U1 _9 F$ Q$ \1 |0 Y5 s<img src="0002.png" width="100%">
0 A$ h9 p  |( {; }</>
* V# c* b* P( K( }5 m1 J: S; Y
13. & 14. 是先放大 180% 再切一半的實例 如此切下的圖便 Fit screen 90%
- s' x' w) N& a! ~# u
2 M# N: N* `* K2 \/ d0 Z13.  clip-path_left.html 左側不需移
test
<style> img { clip-path: inset(0 50% 0 0);} </style>
- t% |& ^% q! N" q$ r<img src="0002.png" width="180%">
9 B3 S8 k' G9 O9 Y  l/ R& X</>
2 A3 F+ L) A. L# J/ o
14. clip-path_right.html margin-left 移 width 的一半就是切欄了
test
* ]% u  d4 t  D; I5 T. f! A+ p<style>
img {
$ m) C5 r; y- P6 a, f1 b  clip-path: inset(0 0 0 50%); margin-left: -90%
}
, p( Y  J1 d; l# x( C; r</style>
. g9 Y+ C  |- [& x- \<img src="0002.png" width="180%">
* H9 k2 E$ v7 z0 P6 T8 w1 k6 n</>
2 @) T3 l" }. C" ?, I
- ]  P- j! _; _4 v; u3 w: d
( t; s# f9 g$ `) Q" }- M# A

在此 https://bennettfeely.com/clippy/ 站上試著調整外型大概就能知道該如何設計




% F8 k3 M5 ?; J& ^0 P, C" U
不然就試試 firetimer 兄的方法....看 css clip-path : inset     能否在 mdict and goldendict 實現

他的奇技淫巧之法太過於精妙....在下目前還無法參透....您得向他請益....
: W  L6 |( G5 h1 `! W




( {- T* U3 a5 G) |# a6 A* O, E' i
# k5 x4 V! g% O) p1 {1 B
* U  W$ a3 i- e) G

wjl

喬治兄 发表于 2020-8-8 22:55
Clip 可以實現，您若用chigre兄的軟件取得座標，再處理一下是可行的
但若clip path , 因mdict和golidendic ...

乔治兄，Clip的比例调整可以试试transform:scale(0.5,0.5);参数，在MDict中有效

* W2 _, |/ b  \; V0 {
8 F% U0 \  r: r7 `+ X1 K.citiao {
    font-weight: 900;
$ s7 \9 q- m, R* p    font-size:130%;
}
  \! ]- M7 G" J6 _# ~/ l.shiyi {
    font-weight: bold;
3 }( m9 ~; e3 J: }& d8 r    background-color: red;
}
.tubox
/ K% N& @$ n; A{
background-color:#00FFFF;
3 F2 g* O. {: c  W$ l4 F5 K' U' ewidth: 100%;
/ y4 P) [" f6 R4 h9 w! |3 eheight:100%;
overflow: hidden;
}
. R& w5 ?- z% r2 U* x# H6 v/ _img
8 J& L# q! i% ~. e{
4 G* ~* T0 s, V( r3 e9 `position: absolute;clip: rect(3000px,4204px,6094px,2000px); margin-top: -3000px; margin-left: -2000px;transform:scale(0.5,0.5);
# n$ N/ V) ~& }+ [$ e( ]/ D% m. r}

喬治兄

6 r( e2 z' m' g; A6 ^* r8 F

wjl 发表于 2020-8-10 12:23
$ [$ V# y  a0 E# B4 C  t% Y6 h% ^乔治兄，Clip的比例调整可以试试transform:scale(0.5,0.5);参数，在MDict中有效

! E, g* Y% C8 h, I9 b7 j' l, K
wjl 兄:
# c* h, z& @, c. ~5 g太強了....謝謝啦.....讚..讚..讚...
5 C. U" l7 Y* {& A' Q7 d這樣调整比例更加簡單

4 X- f0 I4 e; x' [# j
- T& k8 j, g8 M8 I% y/ q/ n

wjl 兄 transform:scale(0.5,0.5).....若放於外部 css 是否就是全局的變數
不知是否可行

wjl

3 Z% S3 L/ X" O5 n. O) N" C2 k" ^我就是放外部css文件中了，并且css文件修改后mdict就可以实时显示，无需使用其它工具。这个参数配合clip裁剪时我感觉应该放到每个词条，毕竟每个词条的截取区域和比例不一致。我只试过外部整体，单个词条的还没测试过，按原理应该整体和局部都适用。

喬治兄

wjl 发表于 2020-8-10 12:57
; n6 U, x6 I2 J* I4 T3 `$ W我就是放外部css文件中了，并且css文件修改后mdict就可以实时显示，无需使用其它工具。这个参数配合clip裁 ...

9 v# v. b: \% N3 k' kwjl 兄:
" J, e: h  o% z" c( y: n謝謝您提出的方案....若有再搞定位再來試試效果
! x. i! |7 L/ R3 C! E3 H* ?