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

喬治兄 · 发表于 2019-9-26 01:28:31

本帖最后由喬治兄于 2019-9-26 12:34 编辑

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

參考下帖問題
[求助] 請賜教: 求 clip 圖置於左上無切圖嘗試製作 https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=36035&extra

請注意綠色是左欄單字, 藍色是右欄單字
很簡單的利用 負的座標 margin-top 和 margin-left 把座標移回去
附件在圖片下面 Clip_Margin.zip
感覺此方法不甚具有彈性盼各位同好先進指點更加具有彈性的處理方法
謝謝

Try Error

PS.

此為兩欄式的 Clip 座標切圖法
三欄式的 Clip 座標切圖法應該也是大同小異....相同的 HTML 語法便可處理
若需同頁左最下單詞和右最上的釋意合併於一個詞條或有當頁最右下角單詞和隔頁最* s' |5 B1 X8 d* U8 a5 U/ {* t% i
左上角釋意合併於一個詞條應於 Excel 能計算到相接合的座標再搞成同樣形式合併之
9 M4 c7 j: @7 m) G

abbreviation
<b>abbreviation</b>
<br>
<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">
</>
ABC
0 p% u$ Z, V1 g6 [7 k<b>ABC</b>
<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
; t! g% A2 P, Z! f1 x0 f A<b>abet</b>
<br>
<style>img { position: absolute;clip: rect(561px,1416px,936px,707px); margin-top: -561px; margin-left: -707px;}</style>
<img src="0002.png" width="1416" height="2172">
</>
abeyance
<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">
</>

jonah_w · 发表于 2019-9-26 03:27:27

终于perfect了啊

恭喜恭喜

喬治兄 · 发表于 2019-9-26 03:35:46

本帖最后由喬治兄于 2019-9-26 05:02 编辑

jonah_w 发表于 2019-9-26 03:270 q) R1 k o+ c: N
终于perfect了啊 $ R9 S6 {; h' }% h1 G8 s7 k
恭喜恭喜

jonah_w 兄:
哈..哈, 雛型模式...
還會再踢很多鐵板的難題....
不可能有所謂的 perfect

Charlieqiu · 发表于 2019-9-26 05:20:40

根据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

喬治兄 · 发表于 2019-9-26 05:39:05

Charlieqiu 发表于 2019-9-26 05:20
& V. \& b! ^* s0 D, f& R4 ^- C根据MDN对clip的说法，! j+ L8 \1 Z5 v B
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip7 m. `* c2 B1 J) U' ^+ p1 K9 e% n
不过可以用clip-path，htt ...

Charlieqiu 兄:
昨晚試了一夜就是試 clip-path
很遺憾的沒試出來
也因也頭昏眼花
沒再試 clip-path 方法
可能是試 clip-path 方法有誤吧

Charlieqiu · 发表于 2019-9-26 07:48:17

喬治兄发表于 2019-9-26 05:39
7 q; L% {. T( b5 @; TCharlieqiu 兄:3 b* t8 z# \. q+ l, V# m: X
昨晚試了一夜就是試 clip-path9 @" f9 B) s' Q4 ]6 `
很遺憾的沒試出來

兼容性
* D2 n4 M, U4 A( i @. K5 n1 v+ h) y目前 IE 和 Edge 都不支持这个属性。Firefox 仅部分支持 clip-path，部分支持是指只支持形状和 URL(#path) 内联SVG的语法。Chrome、Safari 和 Opera 需要使用 -webkit- 的前缀兼容此属性。不支持外部的 SVG 形状。更多兼容信息可以点击这里查看 clip-path 浏览器兼容情况。9 y7 K# J9 ^! S( |! ^0 j- D$ q
" |) z+ Z; s: R- |/ @
作者：创宇前端" p# V7 V5 Q6 h: [) L$ X; P
链接：https://juejin.im/post/5a975c14f265da4e9c635ea4: ^5 e0 a3 I% J6 R; q8 [+ o
来源：掘金" e. I7 n8 Z) }1 A% Y
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

clip-path还不是普遍支持的

Mandolin · 发表于 2019-9-26 09:42:37

谢谢推荐，喬治兄真是乐于探索啊，想必有一天会成为大师。

我没学过css，经你这推荐去了解了一下，这个clip：rect功能就是在展示图片的时候只显示指定的矩形部分吧，这可以实现不切图而进行单个词条的展示，但实际感觉并不好用，一是坐标比较难获取，二是很多图片并不规律，不知道对于这两点喬治兄有无较好的对策。

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

oversky · 发表于 2019-9-26 10:06:24

可以参考一下相机比较网站的做法。例如：
https://is.gd/tQ3u0C
https://is.gd/1wvufo

如果能实现移动框框，
那“切图”演算法的偏差就不是很严重的缺失，
可以省下校对的功夫。

喬治兄 · 发表于 2019-9-26 11:13:39

Charlieqiu 发表于 2019-9-26 07:48
* Z1 ?+ C0 S- ` t9 Hclip-path还不是普遍支持的

Charlieqiu 兄:
謝謝您提供 clip-path 前沿資訊
記得好像是我的網頁有顯示 OK
mdict 沒有正確顯示而是顯示整頁
小弟會再試試
謝謝

Charlieqiu · 发表于 2019-9-26 11:19:00

喬治兄发表于 2019-9-26 11:139 p/ v( x* p2 G+ s4 Y
Charlieqiu 兄:
! E2 `0 f. F; o% _" W( Q) r謝謝您提供 clip-path 前沿資訊
' B7 J5 w. t7 ^. O/ V5 N記得好像是我的網頁有顯示 OK

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

喬治兄 · 发表于 2019-9-26 11:47:35

本帖最后由喬治兄于 2019-9-26 11:57 编辑

Mandolin 发表于 2019-9-26 09:423 ], E$ v* c9 | [3 E
谢谢推荐，喬治兄真是乐于探索啊，想必有一天会成为大师。
& `% T8 [- [% r5 f, v0 _1 z6 ?
v9 n& k' F) U% z我没学过css，经你这推荐去了解了一下，这个cli ...

Mandolin 兄:
非也, 非也, 僅是個人需求
整頁全文搜索 Highlight 編輯過於繁複冗長
容量膨脹太大不利編輯

chigre3兄的自动根据黑色像素点定位坐标进而切图的方法，是堪稱一絕的方法
小弟也很想學....
畢竟能夠完成想要達成的方法都是值得去試去了解的

喬治兄 · 发表于 2019-9-26 12:01:54

oversky 发表于 2019-9-26 10:06
% O4 U3 j7 B0 T* N0 R可以参考一下相机比较网站的做法。例如：' M( z1 _# `4 } V1 R' a, d% h: k
https://is.gd/tQ3u0C
6 J K" [- l# c& jhttps://is.gd/1wvufo

謝謝仁兄提供多樣且另類的資訊
確實值得思考
謝謝

喬治兄 · 发表于 2019-9-26 12:05:46

Charlieqiu 发表于 2019-9-26 11:195 ^ b" w' v; P0 O" f
哈哈，我也没试过这个，只是看网上这么写着，就粘贴过来了，不过乔治兄倒提供了一个很好的思路 ...

Charlieqiu 兄:
該謝謝你才是
您的貼的訊息
有更明確的範例
更易於理解實驗
謝謝

chigre3 · 发表于 2019-9-26 14:47:43

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

喬治兄 · 发表于 2019-9-26 15:03:36

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

Chigre 兄，谢谢提供您的经验，一路套用你的方法，根本不用动脑筋就可达成，要不是因其他需求搞不定，真不想自己动脑筋，哈，哈哈哈哈哈！

喬治兄 · 发表于 2019-9-26 19:14:18

本帖最后由喬治兄于 2019-9-26 20:02 编辑

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

Chigre 兄:

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

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

<img src="xxx.png" width="5800" height="8500"> ==> <img src="xxx.png" width="2900" height="4250">

<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>

wjl · 发表于 2020-8-8 22:29:11

喬治兄发表于 2019-9-26 19:14% q C4 i# W% L+ C' x) h
Chigre 兄: O4 u! J; T1 e; S5 S( C F
/ q/ w2 F: p) j5 s
此問題確實可能也存在

Clip、Clip-path方法着重图片裁剪，不知道有没有单独调整显示窗口的办法，将图片按width: 100%;显示后，再套一个任意大小的观看窗口或显示框，窗口或显示框内显示，外部隐藏，显示效果也就相当于裁剪图片了

喬治兄 · 发表于 2020-8-8 22:55:20

本帖最后由喬治兄于 2020-8-8 23:56 编辑

wjl 发表于 2020-8-8 22:293 _) i! {9 Y7 H- h, y$ `
Clip、Clip-path方法着重图片裁剪，不知道有没有单独调整显示窗口的办法，将图片按width: 100%;显示后， ...

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

[工具] Preview - 修改MDX CSS的神器，支持CSSJS实时预览... https://www.pdawiki.com/forum/forum.php?mod=viewthread&tid=39559&highlight=preview

但您若用 preview，則 css clip-path : inset 應該是沒問題，因 last_idol 兄應該是可直接用你裝的 chrome 瀏覽器去解析, 若 ie 應該也是不行，clip 僅能座標，clip path 彈性較大，可以用比例，您可以看我那帖子有一個網站有較詳細的clip path標簽的介紹，若要應用看 inset 那個應該是蠻適用的
請賜教: 有關 css clip-path 的疑惑
https://www.pdawiki.com/forum/thread-36172-1-1.html

9. 請參閱 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 應該也是能成的

11. clip-path vs clip ==> clip-path 之優點可跳脫座標點之束縛, 可將取下的區域透過一兩個參數便可放大縮小
   實為更為便利* W- }7 q9 r, S+ R* s
12: 取的範圍不是很正確僅是說明用 Clip-Path-Inset_4.html

aberration
<b>aberration</b><br>
<style> img { clip-path: inset( 7.77% 0 74.17% 50% ); margin-top: -7.77%; margin-left: -50%} </style>
<img src="0002.png" width="100%">
</>

13. & 14. 是先放大 180% 再切一半的實例如此切下的圖便 Fit screen 90%

13.  clip-path_left.html 左側不需移. `  T# @% K6 o* _8 o
test
<style> img { clip-path: inset(0 50% 0 0);} </style>
<img src="0002.png" width="180%">
</>

14. clip-path_right.html margin-left 移 width 的一半就是切欄了
test
<style>
img {
  clip-path: inset(0 0 0 50%); margin-left: -90%
}
</style>
<img src="0002.png" width="180%">
</>

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

不然就試試 firetimer 兄的方法....看 css clip-path : inset 能否在 mdict and goldendict 實現

他的奇技淫巧之法太過於精妙....在下目前還無法參透....您得向他請益....

wjl · 发表于 2020-8-10 12:23:31

喬治兄发表于 2020-8-8 22:55; w8 c; N4 j6 I" ?3 r- h% C
Clip 可以實現，您若用chigre兄的軟件取得座標，再處理一下是可行的
" A) H3 f3 u% H6 T! L但若clip path , 因mdict和golidendic ...

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

.citiao {
font-weight: 900;
font-size:130%;
}
.shiyi {
font-weight: bold;
background-color: red;
}
.tubox
{
background-color:#00FFFF;
width: 100%;
height:100%;
overflow: hidden;
}
img
{
position: absolute;clip: rect(3000px,4204px,6094px,2000px); margin-top: -3000px; margin-left: -2000px;transform:scale(0.5,0.5);
}

喬治兄 · 发表于 2020-8-10 12:36:41

本帖最后由喬治兄于 2020-8-10 12:41 编辑

wjl 发表于 2020-8-10 12:23
0 t3 U. z; }/ h; C乔治兄，Clip的比例调整可以试试transform:scale(0.5,0.5);参数，在MDict中有效

wjl 兄:
太強了....謝謝啦.....讚..讚..讚...
這樣调整比例更加簡單

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

wjl · 发表于 2020-8-10 12:57:23

本帖最后由 wjl 于 2020-8-10 13:01 编辑

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

喬治兄 · 发表于 2020-8-10 13:23:27

wjl 发表于 2020-8-10 12:57. I( ?( I4 [9 [5 ?
我就是放外部css文件中了，并且css文件修改后mdict就可以实时显示，无需使用其它工具。这个参数配合clip裁 ...

wjl 兄:
謝謝您提出的方案....若有再搞定位再來試試效果

		自动登录	找回密码
密码			免费注册

[教程] 【Clip 座標切圖法】製作不切圖片的切圖法

本帖子中包含更多资源

本帖被以下淘专辑推荐: