Как я создаю размытый текст в представлении iPhone?

Question

Как я создаю размытый текст в представлении iPhone?

mapboxgl.Marker реализованы в виде простых HTML

элементов. Вы можете присоединить к ним стандартный прослушиватель событий и вручную переключать всплывающее окно:

const marker = new mapboxgl.Marker({/* options */});
const markerDiv = marker.getElement();

markerDiv.addEventListener('mouseenter', () => marker.togglePopup());
markerDiv.addEventListener('mouseleave', () => marker.togglePopup());

См. Документы: https://docs.mapbox.com/mapbox-gl-js/api/#marker# getelement

РЕДАКТИРОВАТЬ: Предотвращение открытия всплывающего окна при щелчке

Я пытался провести некоторое тестирование, и единственное, что надежно работает, это вызвать marker.togglePopup() в ваш собственный обработчик кликов

map.on('click', event => {
  const target = event.originalEvent.target;
  const markerWasClicked = markerDiv.contains(target);

  marker.togglePopup();
});

Полный пример: https://jsfiddle.net/am2jwtzg/

7

uikit graphics cocoa-touch objective-c iphone

задан Peter Hosey 16 August 2010 в 14:03

4 ответа

Другие вопросы по тегам:

uikit graphics cocoa-touch objective-c iphone

Похожие вопросы:

score 1 · Answer 1

iPhone OS не обеспечивает Базовых фильтров Изображения, которые я знаю - иначе, да, фильтрованный CALayer был бы правильным способом сделать это. Если бы NSBitmapImageRep были доступны, то Вы могли бы сделать примитивную размытость путем рисования текста к нему, уменьшения изображения (субдискретизация), то, увеличивая изображение, снова (сверхдискретизировавшее) - к сожалению, это, кажется, отсутствует также. Я видел размытый текст, выполненный в Flash, который (длятся, я проверил), не имеет фильтрации пиксельного уровня; Вы могли бы попытаться искать учебное руководство на этом и видеть то, что можно адаптировать к Касанию Какао.

score 0 · Answer 2

На рабочем столе, никаком вопросе, Вы использовали бы CoreImage, чтобы сделать это.

По телефону, хотя, я не думаю, там существует способ сделать это использование CoreGraphics. Если абсолютно очень важно, что OpenGLES может помогать.

Однако я предложил бы заново продумать Ваш интерфейс. Я думал бы, что размытый текст будет недоволен.

Править: mledford указывает в комментариях, что Вы могли использовать CoreAnimation. Я не знаю, включает ли CA по телефону радиус размытия как в рабочий стол, но Вы могли бы попробовать его.

score 0 · Answer 3

Вы получите удар производительности при использовании альфа-слоев. Считайте другой подход если возможным (возможно, даже предварительное составление композита текста и выравнивание его в диаграмму вместо нескольких слоев).

Попробуйте его и используйте Инструменты, чтобы проверить производительность и видеть, приемлемо ли это. При выполнении его в представлении прокрутки прокрутка сорвет много.

score 9 · Answer 4

Взгляните на образец iPhone Apple GLImageProcessing. Среди прочего, он делает некоторое размытие.

Соответствующий код включает:

static void blur(V2fT2f *quad, float t) // t = 1
{
    GLint tex;
    V2fT2f tmpquad[4];
    float offw = t / Input.wide;
    float offh = t / Input.high;
    int i;

    glGetIntegerv(GL_TEXTURE_BINDING_2D, &tex);

    // Three pass small blur, using rotated pattern to sample 17 texels:
    //
    // .\/.. 
    // ./\\/ 
    // \/X/\   rotated samples filter across texel corners
    // /\\/. 
    // ../\. 

    // Pass one: center nearest sample
    glVertexPointer  (2, GL_FLOAT, sizeof(V2fT2f), &quad[0].x);
    glTexCoordPointer(2, GL_FLOAT, sizeof(V2fT2f), &quad[0].s);
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_MODULATE);
    glColor4f(1.0/5, 1.0/5, 1.0/5, 1.0);
    validateTexEnv();
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    // Pass two: accumulate two rotated linear samples
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE);
    for (i = 0; i < 4; i++)
    {
        tmpquad[i].x = quad[i].s + 1.5 * offw;
        tmpquad[i].y = quad[i].t + 0.5 * offh;
        tmpquad[i].s = quad[i].s - 1.5 * offw;
        tmpquad[i].t = quad[i].t - 0.5 * offh;
    }
    glTexCoordPointer(2, GL_FLOAT, sizeof(V2fT2f), &tmpquad[0].x);
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_REPLACE);
    glActiveTexture(GL_TEXTURE1);
    glEnable(GL_TEXTURE_2D);
    glClientActiveTexture(GL_TEXTURE1);
    glTexCoordPointer(2, GL_FLOAT, sizeof(V2fT2f), &tmpquad[0].s);
    glEnableClientState(GL_TEXTURE_COORD_ARRAY);
    glBindTexture(GL_TEXTURE_2D, tex);
    glTexEnvi(GL_TEXTURE_ENV, GL_TEXTURE_ENV_MODE, GL_COMBINE);
    glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_RGB,      GL_INTERPOLATE);
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_RGB,         GL_TEXTURE);
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC1_RGB,         GL_PREVIOUS);
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC2_RGB,         GL_PRIMARY_COLOR);
    glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB,     GL_SRC_COLOR);
    glTexEnvi(GL_TEXTURE_ENV, GL_COMBINE_ALPHA,    GL_REPLACE);
    glTexEnvi(GL_TEXTURE_ENV, GL_SRC0_ALPHA,       GL_PRIMARY_COLOR);

    glColor4f(0.5, 0.5, 0.5, 2.0/5);
    validateTexEnv();
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    // Pass three: accumulate two rotated linear samples
    for (i = 0; i < 4; i++)
    {
        tmpquad[i].x = quad[i].s - 0.5 * offw;
        tmpquad[i].y = quad[i].t + 1.5 * offh;
        tmpquad[i].s = quad[i].s + 0.5 * offw;
        tmpquad[i].t = quad[i].t - 1.5 * offh;
    }
    glDrawArrays(GL_TRIANGLE_STRIP, 0, 4);

    // Restore state
    glDisableClientState(GL_TEXTURE_COORD_ARRAY);
    glClientActiveTexture(GL_TEXTURE0);
    glBindTexture(GL_TEXTURE_2D, Half.texID);
    glDisable(GL_TEXTURE_2D);
    glTexEnvi(GL_TEXTURE_ENV, GL_OPERAND2_RGB,     GL_SRC_ALPHA);
    glActiveTexture(GL_TEXTURE0);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_NEAREST);
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_NEAREST);
    glDisable(GL_BLEND);
}