Создание солнечного Графического Эффекта / Эффекта Блеска
Предисловие:
- Свойства объекта могут быть own (свойство принадлежит самому объекту) или унаследовано (а не на объекте (один из его прототипов).
- Свойства объекта могут быть перечислены или неперечислимыми . Неперечислимые свойства исключаются из множества перечислений свойств / массивов.
- Имена свойств могут быть строками или символами. Свойства, имена которых являются символами, не учитываются в множестве перечислений свойств / массивов.
Здесь, в 2018 году, ваши возможности для прокрутки свойств объекта:
-
for-in[ MDN , spec ] & mdash; Структура цикла, которая пересекает имена объектов перечисляемых свойств, включая унаследованные, имена которых являются строками -
Object.keys[ MDN , spec ] & mdash; Функция, предоставляющая массив имен свойств собственного , перечисляемых , имена которых являются строками. -
Object.values[ MDN , spec ] & mdash; Функция, предоставляющая массив значений свойств объекта , перечисляемых . -
Object.entries[ ] MDN , spec ] & mdash; Функция, предоставляющая массив значений имен и для свойств объекта , перечисляемых . -
Object.getOwnPropertyNames[ MDN , spec ] & mdash; Функция, предоставляющая массив имен свойств собственного объекта (даже неперечислимых), имена которых являются строками. -
Object.getOwnPropertySymbols[ MDN , spec ] & mdash; Функция, предоставляющая массив имен свойств собственного объекта объекта (даже неперечислимых), имена которых являются символами. -
Reflect.ownKeys[ MDN , spec ] & mdash; Функция, предоставляющая массив имен свойств собственного объекта объекта (даже неперечислимых), являются ли эти имена строками или символами. - Если вы хотите, чтобы все объекты свойства, включая неперечислимые унаследованные, вам нужно использовать цикл и
Object.getPrototypeOf[ MDN , spec ] и использоватьObject.getOwnPropertyNames,Object.getOwnPropertySymbolsилиReflect.ownKeysдля каждого объекта в цепочке прототипов (пример внизу этого ответа).
Со всеми из них, кроме for-in, вы использовали бы какую-то петлевую конструкцию на (for, for-of, forEach и т. д.).
Примеры:
for-in:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name in o) {
const value = o[name];
console.log(`${name} = ${value}`);
} Object.keys (с контуром for-of, но вы можете использовать любую петлевую конструкцию) :
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.keys(o)) {
const value = o[name];
console.log(`${name} = ${value}`);
} Object.values:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const value of Object.values(o)) {
console.log(`${value}`);
} Object.entries:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const [name, value] of Object.entries(o)) {
console.log(`${name} = ${value}`);
} Object.getOwnPropertyNames:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertyNames(o)) {
const value = o[name];
console.log(`${name} = ${value}`);
} Object.getOwnPropertySymbols :
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Object.getOwnPropertySymbols(o)) {
const value = o[name];
console.log(`${String(name)} = ${value}`);
} Reflect.ownKeys:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (const name of Reflect.ownKeys(o)) {
const value = o[name];
console.log(`${String(name)} = ${value}`);
}Все свойства, включая унаследованные неперечислимые:
// A prototype object to inherit from, with a string-named property
const p = {answer: 42};
// The object we'll look at, which inherits from `p`
const o = Object.create(p);
// A string-named property
o.question = "Life, the Universe, and Everything";
// A symbol-named property
o[Symbol("author")] = "Douglas Adams";
for (let depth = 0, current = o; current; ++depth, current = Object.getPrototypeOf(current)) {
for (const name of Reflect.ownKeys(current)) {
const value = o[name];
console.log(`[${depth}] ${String(name)} = ${String(value)}`);
}
}.as-console-wrapper {
max-height: 100% !important;
}3 ответа
Я могу объяснить что эффект в графических терминах.
Создайте изображение приблизительно 3* размер значка.
В рамках этого изображения создайте круг где (высота значка) <радиус <2* (высота значка).
Заполнитесь круг с альфа-смешением/прозрачностью (белому) говорят 10%.
Обрезка, что круговое изображение в новое изображение равного размера к Вашим значкам, где центр круга центрируется вне области просмотра, но вверх 1/2 высота меньшего изображения.
Если Вы затем накладываете это изображение на исходный значок, эффект должен посмотреть приблизительно как вышеупомянутые значки. Это должно быть выполнимо с imagemagick, если Вы увлечены этим, или Вы могли бы пойти для одного из графического API в зависимости от того, какой язык Вы хотите использовать. От шагов выше его должно быть простым, чтобы сделать программно.
Спасибо, Devin! Вот мой Код C# для реализации Вашего предложения. Это работает довольно хорошее. Превращение этого в общественное сообщение Wiki, Если кому-то нравится добавлять некоторый код, не стесняется редактировать это.
(Пример использует различные значения для Alpha и воздействия, чем код ниже),
Image img = Image.FromFile("rss-icon.jpg");
pictureBox1.Image = AddCircularGloss(img, 30,25,255,255,255);
public static Image AddCircularGloss(Image inputImage, int exposurePercentage, int transparency, int fillColorR, int fillColorG, int fillColorB)
{
Bitmap outputImage = new Bitmap(inputImage);
using (Graphics g = Graphics.FromImage(outputImage))
{
using (Pen p = new Pen(Color.FromArgb(transparency, fillColorR, fillColorG, fillColorB)))
{
// Looks jaggy otherwise
g.SmoothingMode = SmoothingMode.HighQuality;
g.CompositingQuality = CompositingQuality.HighQuality;
int x, y;
// 3 * Height looks best
int diameter = outputImage.Height * 3;
double imgPercent = (double)outputImage.Height / 100;
x = 0 - outputImage.Width;
// How many percent of the image to expose
y = (0 - diameter) + (int)(imgPercent * exposurePercentage);
g.FillEllipse(p.Brush, x, y, diameter, diameter);
}
}
return outputImage;
}
(Измененный после предложения John's. Я не могу расположить Битовый массив, хотя, это должно быть сделано вызывающей стороной функции),
Ответ на код C#... В целом, хорошее задание при получении движения обработки изображений. Я должен был сделать подобные вещи с некоторыми моими приложениями в прошлом.
Один совет, однако: Все графические объекты в.NET основаны на Windows GDI + примитивы. Это означает, что эти объекты требуют, чтобы корректное распоряжение очистило их нересурсы памяти, во многом как дескрипторы файлов или соединения с базой данных. Вы захотите настроить код немного для поддержки этого правильно.
Весь GDI + объекты реализует интерфейс IDisposable, делая их функциональными с оператором использования. Рассмотрите перезапись Вашего кода так же к следующему:
// Experiment with this value
int exposurePercentage = 40;
using (Image img = Image.FromFile("rss-icon.jpg"))
{
using (Graphics g = Graphics.FromImage(img))
{
// First Number = Alpha, Experiment with this value.
using (Pen p = new Pen(Color.FromArgb(75, 255, 255, 255)))
{
// Looks jaggy otherwise
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
int x, y;
// 3 * Height looks best
int diameter = img.Height * 3;
double imgPercent = (double)img.Height / 100;
x = 0 - img.Width;
// How many percent of the image to expose
y = (0 - diameter) + (int)(imgPercent * exposurePercentage);
g.FillEllipse(p.Brush, x, y, diameter, diameter);
pictureBox1.Image = img;
}
}
}
(Примите во внимание, в отличие от большинства моих образцов, у меня не было шанса скомпилировать и протестировать это... Это означало больше как образец структурирования кода для обеспечения, что нет никаких утечек ресурсов, не как готовое изделие. Существуют, вероятно, лучшие способы абстрагировать/структурировать это так или иначе. И сильно рассмотрите выполнение, таким образом - бросают это в графической библиотеке DLL, на которую можно просто сослаться в любом проекте, для которого нужны эти возможности в будущем!)