Открыл для себя DokuWiki
Очень простой в использовании и установке WIKI подобный портал. Устанавливается простым копированием скриптов в папку. Не требует БД. Удобный встроенный поиск, корректно работающий с русским языком.
Рубрика: WEB
Здесь собраны статьи, наработки, исправление ошибок и решение проблем связанных с разработкой для WEB
fabric.js подсказка при наведении мышки на обьект..
Странно, что такой полезной функции не оказалось в «коробке»…Ну да ничего. Решаемо.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
function showImageTools (e) { data="<div id=imageDialog class='alert' style='z-index: 9999;position: absolute'>OLALA</div>"; if (!$('#imageDialog').length) { $("#saveweldingandmark").append(data); } moveImageTools(e); }; function moveImageTools (e) { var w = $('#imageDialog').width(); var h = $('#imageDialog').height(); $('#imageDialog').show(); $('#imageDialog').css({top: my, left: mx}); } var MouseCoords = { getX: function(e){ if (e.pageX) { return e.pageX; } else if (e.clientX) { return e.clientX+(document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft; } return 0; }, getY: function(e){ if (e.pageY){ return e.pageY; } else if (e.clientY) { return e.clientY+(document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop; } return 0; } }; document.onmousemove = function(e){ if (!e) e = window.event; mx=MouseCoords.getX(e); my=MouseCoords.getY(e); }; canvas.on('mouse:over', function (e) { console.log("Я на что-то наехал..."); showImageTools(e.target); }); canvas.on('mouse:out', function (e) { $('#imageDialog').remove(); }); |
Библиотека для работы с графикой на JavaScript
Последнее время активно работаю с библиотекой fabric.js, для работы с графикой на JavaScript, а именно делаю «редактор муфт»:
Библиотека позволяет на холсте canvas работать с графикой как с объектами: выделять, изменять, назначать обработчики событий (выделение, клик, перемещение и т.п.) для каждого объекта. Ну и еще много всего. В то-же время она достаточно проста в освоении.
Однако приведу несколько моментов, на которые пришлось потратить время, что-бы разобраться:
1) Перебор всех объектов в canvas:
|
1 2 |
canvas.forEachObject(function(obj) { }; |
2) Для очистки canvas от всех объектов:
|
1 |
canvas.clear(); |
3) Закраска объекта градиентом:
|
1 2 3 |
var rect = new fabric.Rect({left: 20,top: 0,fill: 'yellow',width: wx-40,height: steph,selectable:false,shadow: 'green 2px 2px 2px'}); rect.setGradient('fill', {x1: 0,y1: 0,x2: 0,y2: rect.height,colorStops: {1: '#000',0: '#fff'}}); canvas.add(rect); |
4) Назначение событий:
|
1 2 3 4 |
canvas.on('object:selected', function(e) { p = e.target; // в p сейчас, обьект по которому "щелкнули" }); |
Реализация рисования на картах с использованием API Яндекс.Карт.
Задача: необходимо реализовать рисование на картах, с возможностью сохранения нарисованного во внешнюю базу.
Решение: будем использовать API Яндекс.Карт.
Логика: отображаем карту в зависимости от выбранного подразделения, и слоя. При выборе подразделения или слоя, подгружаем из вне ранее нарисованные обьекты. При нажатии кнопки «Сохранить» — сохраняем их во внешнюю базу.
Демо (безо возможности сохранения обьектов)
Далее код: » Читать далее
Меняем ширину темы twenty fourteen для WordPress
По непонятной причине разработчики темы twenty fourteen для WordPress решили что ширина экрана на современных экранах, ограничена размером в 1260 пикселей. Странно.. однако тема хорошая, а потому её можно чуть чуть «пофиксить».. Для этого нужно отредактировать style.css:
- Найти все упоминания 1260px и заменить на 100%
- Найти все вхождения max-width: 672px; и заменить на max-width: 100%;
- Найти все вхождения max-width: 474px; и заменить на max-width: 80%;