mirror of
https://github.com/zero-peak/ZeroOmega.git
synced 2025-01-22 15:08:12 -05:00
Update canvas drawing algorithm with larger icon. Fix #803.
This commit is contained in:
FelisCatus
parent
bf3df2b707
commit
56db37d4d9
@ -28,21 +28,26 @@ Promise.onUnhandledRejectionHandled (promise) ->
|
||||
unhandledPromisesId.splice(index, 1)
|
||||
|
||||
iconCache = {}
|
||||
drawContext = null
|
||||
drawIcon = (resultColor, profileColor) ->
|
||||
cacheKey = "omega+#{resultColor ? ''}+#{profileColor}"
|
||||
icon = iconCache[cacheKey]
|
||||
return icon if icon
|
||||
ctx = document.getElementById('canvas-icon').getContext('2d')
|
||||
ctx2x = document.getElementById('canvas-icon-2x').getContext('2d')
|
||||
if resultColor?
|
||||
drawOmega ctx, resultColor, profileColor
|
||||
drawOmega2x ctx2x, resultColor, profileColor
|
||||
else
|
||||
drawOmega ctx, profileColor
|
||||
drawOmega2x ctx2x, profileColor
|
||||
icon =
|
||||
19: ctx.getImageData(0, 0, 19, 19)
|
||||
38: ctx2x.getImageData(0, 0, 38, 38)
|
||||
if not drawContext?
|
||||
drawContext =
|
||||
19: document.getElementById('canvas-icon').getContext('2d')
|
||||
38: document.getElementById('canvas-icon-2x').getContext('2d')
|
||||
for own size, ctx of drawContext
|
||||
ctx.scale(size * 1, size * 1)
|
||||
|
||||
icon = {}
|
||||
for own size, ctx of drawContext
|
||||
if resultColor?
|
||||
drawOmega ctx, resultColor, profileColor
|
||||
else
|
||||
drawOmega ctx, profileColor
|
||||
icon[size] = ctx.getImageData(0, 0, size * 1, size * 1)
|
||||
|
||||
return iconCache[cacheKey] = icon
|
||||
|
||||
charCodeUnderscore = '_'.charCodeAt(0)
|
||||
|
||||
@ -13,8 +13,7 @@
|
||||
<script src="js/omega_pac.min.js"></script>
|
||||
<script src="js/omega_target.min.js"></script>
|
||||
<script src="js/omega_target_chromium_extension.min.js"></script>
|
||||
<script src="img/icons/omega_svg.js"></script>
|
||||
<script src="img/icons/omega-2x_svg.js"></script>
|
||||
<script src="img/icons/draw_omega.js"></script>
|
||||
<script src="js/background.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
19
omega-web/img/icons/draw_omega.js
Normal file
19
omega-web/img/icons/draw_omega.js
Normal file
@ -0,0 +1,19 @@
|
||||
var drawOmega = function (ctx, outerCircleColor, innerCircleColor) {
|
||||
ctx.globalCompositeOperation = "source-over";
|
||||
ctx.fillStyle = outerCircleColor;
|
||||
ctx.beginPath();
|
||||
ctx.arc(0.5, 0.5, 0.5, 0, Math.PI * 2, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
|
||||
if (innerCircleColor != null) {
|
||||
ctx.fillStyle = innerCircleColor;
|
||||
} else {
|
||||
ctx.globalCompositeOperation = "destination-out";
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(0.5, 0.5, 0.25, 0, Math.PI * 2, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
};
|
||||
12
omega-web/img/icons/omega-128.svg
Normal file
12
omega-web/img/icons/omega-128.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="128"
|
||||
height="128"
|
||||
version="1.1">
|
||||
<path
|
||||
d="M 64 64 m -56 0 a 56 56 0 1 0 112 0 a 56 56 0 1 0 -112 0 M 64 64 m -28 0 a 28 28 0 1 0 56 0 a 28 28 0 1 0 -56 0"
|
||||
fill-rule="evenodd"
|
||||
fill="#31afec"
|
||||
stroke="none" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 334 B |
@ -1,14 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="38"
|
||||
height="38"
|
||||
version="1.1">
|
||||
<path
|
||||
d="m 28.091374,19.0002 c 0,4.909654 -4.070348,8.889716 -9.091374,8.889716 -5.021027,0 -9.0913735,-3.980062 -9.0913735,-8.889716 0,-4.909654 4.0703465,-8.889716 9.0913735,-8.889716 5.021026,0 9.091374,3.980062 9.091374,8.889716 z M 36.077892,19 C 36.077892,28.222652 28.431858,35.699084 19,35.699084 9.5681407,35.699084 1.922108,28.22265 1.922108,19 1.922108,9.77735 9.5681407,2.300916 19,2.300916 28.431858,2.300916 36.077892,9.77735 36.077892,19 z"
|
||||
fill-rule="evenodd"
|
||||
class="profile-color"
|
||||
fill="#31afec"
|
||||
stroke="none"
|
||||
id="profile-circle" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 718 B |
@ -1,34 +0,0 @@
|
||||
var drawOmega2x = function (ctx, outerCircleColor, innerCircleColor) {
|
||||
ctx.clearRect(0,0,38,38);
|
||||
|
||||
ctx.lineCap = 'butt';
|
||||
ctx.lineJoin = 'miter';
|
||||
ctx.miterLimit = 4;
|
||||
|
||||
if (innerCircleColor != null) {
|
||||
ctx.fillStyle = innerCircleColor;
|
||||
ctx.moveTo(36.077892,19);
|
||||
ctx.bezierCurveTo(36.077892,28.222652,28.431858,35.699084,19,35.699084);
|
||||
ctx.bezierCurveTo(9.5681407,35.699084,1.922108,28.22265,1.922108,19);
|
||||
ctx.bezierCurveTo(1.922108,9.77735,9.5681407,2.300916,19,2.300916);
|
||||
ctx.bezierCurveTo(28.431858,2.300916,36.077892,9.77735,36.077892,19);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
ctx.fillStyle = outerCircleColor;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(28.091374,19.0002);
|
||||
ctx.bezierCurveTo(28.091374,23.909854,24.021026,27.889916,19,27.889916);
|
||||
ctx.bezierCurveTo(13.978973,27.889916,9.9086265,23.909854,9.9086265,19.0002);
|
||||
ctx.bezierCurveTo(9.9086265,14.090546,13.978973,10.110484,19,10.110484);
|
||||
ctx.bezierCurveTo(24.021026,10.110484,28.091374000000002,14.090546,28.091374000000002,19.0002);
|
||||
ctx.closePath();
|
||||
ctx.moveTo(36.077892,19);
|
||||
ctx.bezierCurveTo(36.077892,28.222652,28.431858,35.699084,19,35.699084);
|
||||
ctx.bezierCurveTo(9.5681407,35.699084,1.922108,28.22265,1.922108,19);
|
||||
ctx.bezierCurveTo(1.922108,9.77735,9.5681407,2.300916,19,2.300916);
|
||||
ctx.bezierCurveTo(28.431858,2.300916,36.077892,9.77735,36.077892,19);
|
||||
ctx.closePath();
|
||||
ctx.fill('evenodd');
|
||||
};
|
||||
12
omega-web/img/icons/omega-action.svg
Normal file
12
omega-web/img/icons/omega-action.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="38"
|
||||
height="38"
|
||||
version="1.1">
|
||||
<path
|
||||
d="M 19 19 m -19 0 a 19 19 0 1 0 38 0 a 19 19 0 1 0 -38 0 M 19 19 m -9.5 0 a 9.5 9.5 0 1 0 19 0 a 9.5 9.5 0 1 0 -19 0"
|
||||
fill-rule="evenodd"
|
||||
fill="#31afec"
|
||||
stroke="none" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 335 B |
@ -1,14 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="19"
|
||||
height="19"
|
||||
version="1.1">
|
||||
<path
|
||||
d="m 14.045687,9.5001002 c 0,2.4548268 -2.035174,4.4448578 -4.5456868,4.4448578 -2.5105136,0 -4.545687,-1.990031 -4.545687,-4.4448578 0,-2.4548275 2.0351734,-4.4448583 4.545687,-4.4448583 2.5105128,0 4.5456868,1.9900308 4.5456868,4.4448583 z m 3.993259,-1.001e-4 c 0,4.6113259 -3.823017,8.3495419 -8.5389459,8.3495419 -4.7159298,0 -8.5389462,-3.738217 -8.5389462,-8.3495419 0,-4.6113251 3.8230164,-8.3495426 8.5389462,-8.3495426 4.7159289,0 8.5389459,3.7382175 8.5389459,8.3495426 z"
|
||||
fill-rule="evenodd"
|
||||
class="profile-color"
|
||||
fill="#31afec"
|
||||
stroke="none"
|
||||
id="profile-circle" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 752 B |
@ -1,37 +0,0 @@
|
||||
var drawOmega = function (ctx, outerCircleColor, innerCircleColor) {
|
||||
ctx.clearRect(0,0,19,19)
|
||||
|
||||
if (innerCircleColor != null) {
|
||||
ctx.save();
|
||||
ctx.fillStyle = innerCircleColor;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(14.05,9.50);
|
||||
ctx.bezierCurveTo(14.05,11.95,12.01,13.94,9.50,13.94);
|
||||
ctx.bezierCurveTo(6.99,13.94,4.95,11.95,4.95,9.50);
|
||||
ctx.bezierCurveTo(4.95,7.05,6.99,5.06,9.50,5.06);
|
||||
ctx.bezierCurveTo(12.01,5.06,14.05,7.05,14.05,9.50);
|
||||
ctx.closePath();
|
||||
ctx.fill('evenodd');
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
ctx.save();
|
||||
ctx.fillStyle = outerCircleColor;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(14.05,9.50);
|
||||
ctx.bezierCurveTo(14.05,11.95,12.01,13.94,9.50,13.94);
|
||||
ctx.bezierCurveTo(6.99,13.94,4.95,11.95,4.95,9.50);
|
||||
ctx.bezierCurveTo(4.95,7.05,6.99,5.06,9.50,5.06);
|
||||
ctx.bezierCurveTo(12.01,5.06,14.05,7.05,14.05,9.50);
|
||||
ctx.closePath();
|
||||
ctx.moveTo(18.04,9.50);
|
||||
ctx.bezierCurveTo(18.04,14.11,14.22,17.85,9.50,17.85);
|
||||
ctx.bezierCurveTo(4.78,17.85,0.96,14.11,0.96,9.50);
|
||||
ctx.bezierCurveTo(0.96,4.89,4.78,1.15,9.50,1.15);
|
||||
ctx.bezierCurveTo(14.22,1.15,18.04,4.89,18.04,9.50);
|
||||
ctx.closePath();
|
||||
ctx.fill('evenodd');
|
||||
ctx.restore();
|
||||
ctx.save();
|
||||
ctx.fillStyle = outerCircleColor;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user