Beautify the background color of Svg Web2

This commit is contained in:
ema
2025-06-30 06:00:29 +08:00
parent 98dd96283d
commit 7ca7d2783e
4 changed files with 29 additions and 55 deletions

View File

@@ -45,24 +45,27 @@ public class WebpagePanel : UserControl
public WebpagePanel() public WebpagePanel()
{ {
if (!Helper.IsWebView2Available()) if (!Helper.IsWebView2Available())
{
Content = CreateDownloadButton(); Content = CreateDownloadButton();
}
else else
InitializeComponent();
}
protected virtual void InitializeComponent()
{
_webView = new WebView2
{ {
_webView = new WebView2 CreationProperties = new CoreWebView2CreationProperties
{ {
CreationProperties = new CoreWebView2CreationProperties UserDataFolder = Path.Combine(SettingHelper.LocalDataPath, @"WebView2_Data\"),
{ },
UserDataFolder = Path.Combine(SettingHelper.LocalDataPath, @"WebView2_Data\"),
}, // Prevent white flash in dark mode
DefaultBackgroundColor = OSThemeHelper.AppsUseDarkTheme() ? Color.FromArgb(255, 32, 32, 32) : Color.White, // Prevent white flash in dark mode DefaultBackgroundColor = OSThemeHelper.AppsUseDarkTheme() ? Color.FromArgb(255, 32, 32, 32) : Color.White,
}; };
_webView.NavigationStarting += Webview_NavigationStarting; _webView.NavigationStarting += Webview_NavigationStarting;
_webView.NavigationCompleted += WebView_NavigationCompleted; _webView.NavigationCompleted += WebView_NavigationCompleted;
_webView.CoreWebView2InitializationCompleted += WebView_CoreWebView2InitializationCompleted; _webView.CoreWebView2InitializationCompleted += WebView_CoreWebView2InitializationCompleted;
Content = _webView; Content = _webView;
}
} }
public void NavigateToFile(string path) public void NavigateToFile(string path)

View File

@@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN"> <html>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<title>SVG Preview</title> <title>SVG Preview</title>
@@ -22,7 +22,6 @@
#svgWrapper { #svgWrapper {
transform-origin: center center; transform-origin: center center;
transition: transform 0.05s ease-out; transition: transform 0.05s ease-out;
cursor: grab;
} }
</style> </style>
</head> </head>
@@ -30,7 +29,6 @@
<div id="svgContainer"> <div id="svgContainer">
<div id="svgWrapper"></div> <div id="svgWrapper"></div>
</div> </div>
<script src="svg2html.js"></script> <script src="svg2html.js"></script>
</body> </body>
</html> </html>

View File

@@ -6,19 +6,15 @@
wrapper.innerHTML = svgString; wrapper.innerHTML = svgString;
let scale = 1; let scale = 1;
let translate = { x: 0, y: 0 };
let isDragging = false;
let lastMouse = { x: 0, y: 0 };
function updateTransform() { function updateTransform() {
wrapper.style.transform = `translate(${translate.x}px, ${translate.y}px) scale(${scale})`; wrapper.style.transform = `scale(${scale})`;
} }
document.addEventListener("wheel", (e) => { document.addEventListener("wheel", (e) => {
e.preventDefault(); e.preventDefault();
const scaleFactor = 1.1; const scaleFactor = 1.1;
const oldScale = scale;
if (e.deltaY < 0) { if (e.deltaY < 0) {
scale *= scaleFactor; scale *= scaleFactor;
@@ -26,39 +22,8 @@
scale /= scaleFactor; scale /= scaleFactor;
} }
const rect = wrapper.getBoundingClientRect();
const dx = e.clientX - rect.left - rect.width / 2;
const dy = e.clientY - rect.top - rect.height / 2;
translate.x -= dx * (1 - scale / oldScale);
translate.y -= dy * (1 - scale / oldScale);
updateTransform(); updateTransform();
}, { passive: false }); }, { passive: false });
wrapper.addEventListener("mousedown", (e) => {
isDragging = true;
lastMouse = { x: e.clientX, y: e.clientY };
wrapper.style.cursor = "grabbing";
});
document.addEventListener("mousemove", (e) => {
if (!isDragging) return;
const dx = e.clientX - lastMouse.x;
const dy = e.clientY - lastMouse.y;
translate.x += dx;
translate.y += dy;
lastMouse = { x: e.clientX, y: e.clientY };
updateTransform();
});
document.addEventListener("mouseup", () => {
isDragging = false;
wrapper.style.cursor = "grab";
});
updateTransform(); updateTransform();
})(); })();

View File

@@ -16,6 +16,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>. // along with this program. If not, see <http://www.gnu.org/licenses/>.
using Microsoft.Web.WebView2.Core; using Microsoft.Web.WebView2.Core;
using Microsoft.Web.WebView2.Wpf;
using QuickLook.Plugin.HtmlViewer; using QuickLook.Plugin.HtmlViewer;
using System; using System;
using System.Collections.Generic; using System.Collections.Generic;
@@ -29,7 +30,7 @@ using System.Threading.Tasks;
namespace QuickLook.Plugin.ImageViewer; namespace QuickLook.Plugin.ImageViewer;
public class WebImagePanel : WebpagePanel public class SvgImagePanel : WebpagePanel
{ {
protected const string _resourcePrefix = "QuickLook.Plugin.ImageViewer.Resources."; protected const string _resourcePrefix = "QuickLook.Plugin.ImageViewer.Resources.";
protected internal static readonly Dictionary<string, byte[]> _resources = []; protected internal static readonly Dictionary<string, byte[]> _resources = [];
@@ -52,11 +53,18 @@ public class WebImagePanel : WebpagePanel
} }
} }
static WebImagePanel() static SvgImagePanel()
{ {
InitializeResources(); InitializeResources();
} }
protected override void InitializeComponent()
{
_webView = new WebView2();
_webView.CoreWebView2InitializationCompleted += WebView_CoreWebView2InitializationCompleted;
Content = _webView;
}
protected static void InitializeResources() protected static void InitializeResources()
{ {
if (_resources.Any()) return; if (_resources.Any()) return;