В этой маске вы добавите маленькое закругленное
, закрашенное черным, с нанесенным на него feGaussianBlur.
const
bdy = document.body,
svg = document.getElementById('svg'),
crc = document.getElementById('circle'),
rec = document.getElementById('rectangle')
let
mousednX = 0,
mousednY = 0
window.addEventListener('load', position)
bdy.addEventListener('mousedown', mousedown)
window.addEventListener('mouseup', mouseup)
bdy.addEventListener('mousemove', moveEye)
function position(){
const
box = svg.getBoundingClientRect()
svg.style.left = -(box.width - innerWidth) / 2 + 'px'
svg.style.top = -(box.height - innerHeight) / 2 + 'px'
}
function mousedown(e){
e.preventDefault()
mousednX = e.clientX
mousednY = e.clientY
bdy.addEventListener('mousemove', mousemove)
}
function mouseup(){
bdy.removeEventListener('mousemove', mousemove)
}
function mousemove(e){
adjustX = e.clientX - mousednX
adjustY = e.clientY - mousednY
if (svg.getBoundingClientRect().left + adjustX < 0 && svg.getBoundingClientRect().right + adjustX > innerWidth){
svg.style.left = svg.getBoundingClientRect().left + adjustX + 'px'
} else if (svg.getBoundingClientRect().left + adjustX >= 0){
svg.style.left = 0 + 'px'
} else {
svg.style.left = -(svg.getBoundingClientRect().width - innerWidth)
}
if (svg.getBoundingClientRect().top + adjustY < 0 && svg.getBoundingClientRect().bottom + adjustY > innerHeight){
svg.style.top = svg.getBoundingClientRect().top + adjustY + 'px'
} else if (svg.getBoundingClientRect().top + adjustY >= 0){
svg.style.top = 0 + 'px'
} else {
svg.style.top = -(svg.getBoundingClientRect().height - innerHeight)
}
mousednX = e.clientX
mousednY = e.clientY
}
function moveEye(e){
rec.setAttribute('x', -(svg.getBoundingClientRect().left) + e.clientX - rec.getBoundingClientRect().width / 2)
rec.setAttribute('y', -(svg.getBoundingClientRect().top) + e.clientY - rec.getBoundingClientRect().height / 2)
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
margin: 0;
}
#svg {
width: 6144px;
height: 4608px;
position: absolute;
left: -3072px; /* set with JS */
top: -2304px; /* set with JS */
}
#background-image {
width: 6144px;
height: 4608px;
opacity: 0.25;
}
#rectangle {
width: 35vw;
height: 75vh;
}
#main-image {
width: 6144px;
height: 4608px;
mask: url(#myMask);
}
#myMask .bg {
width: 100%;
height: 100%;
}
Но обратите внимание, что установка размеров ваших элементов SVG с помощью CSS является новой функцией SVG2, и это все браузеры до сих пор не реализовали его (например, Firefox). Итак, вот версия, совместимая с SVG1, но там блоки vw
/ vh
не будут работать.
И вы даже можете сделать все это с помощью одного изображения, установив цвет заливки фона в некоторый оттенок серого: [1122 ]
Смотрите на синтаксический анализатор combinators, который я думаю, может помочь Вам. Возможно сделать синтаксические анализаторы во времени выполнения с помощью этой техники. Одним популярным синтаксическим анализатором combinator является Парсек, который использует Haskell в качестве его базового языка. Из документации парсека:
Синтаксические анализаторы Combinator пишутся и используются в том же языке программирования в качестве остальной части программы. Нет никакого разрыва между формализмом грамматики (Yacc), и фактический язык программирования использовал (C)
Синтаксические анализаторы являются первоклассными значениями в языке. Они могут быть помещены в списки, передали как параметры и возвратились как значения. Это легко, расширяют доступный набор синтаксических анализаторов с изготовленными на заказ синтаксическими анализаторами, специфичными для определенной проблемы
Если Вы используете.NET, смотрят на синтаксический анализатор combinator библиотека для F#.
Если Java лучше для Вас, существует порт библиотеки Haskell Parsec - JParsec. Очень мощный, хотя документация не является замечательной.
Можно принудить его, чтобы сделать, прямой закон затем анализирует фазу, но можно сделать некоторые интересные вещи с динамическим lexing и динамическими грамматиками.
Голова, скручивающая материал.
Поскольку это - все в Java (Вашим Синтаксическим анализатором является POJO), можно осуществить рефакторинг и сделать TDD, и независимо от того, что Вы привыкли делать в Java. Это - главное преимущество для более традиционного подхода ANTLR/JavaCC/JJTree.
Лямбда Окончательное обсудило синтаксический анализатор, который позволяет расширения синтаксиса.
Я проектирую запись компилятора, который позволил бы расширения синтаксиса (некоторое метапрограммирование времени компиляции). Я не хочу иметь очень мощную систему, таким образом, я думал о просто наличии:
{syntax: while (condition) do code} while (condition, code) => // actual execution
и замените каждый шаблон, который соответствует синтаксису вызову к функции. Однако я не знаю, где начать получать выполнение лексического анализатора и синтаксического анализатора, потому что обычные инструменты, такие как Flex/бизон или ANTLR (я хотел бы записать компилятор в C#), кажется, не позволяют это.
Вы могли предоставить мне какое-либо направление на том, куда пойти затем? Я также читал, что Схема или Haskell могли быть лучшими языками для достижения этой задачи. И конечно, я открыт для любого предложения о фактической идее реализовать их.
Да, конечно!
На всех динамических языках это очень просто достигнуть, потому что код может легко быть сгенерирован и оценен во времени выполнения. Я рекомендую две альтернативы:
Я лично рекомендую опцию Python, хотя не может быть необходимо, если Вы знаете Perl, но не Python.
Для полноты я должен отметить, что можно сделать это с Lex & Yacc также, но это является волосатым. Необходимо будет генерировать Закон / файл Yacc от грамматики во времени выполнения, скомпилировать в C, скомпилировать это в общий lib и загрузить его во времени выполнения. Это походит на научную фантастику, но некоторые инструменты на самом деле делают это для сложных потребностей эффективности и dynamicity.
Удачи.
JFlex, расширение Java JLex, позволяет Вам сделать компиляцию времени выполнения, но это - довольно волосатый материал.
Что Вы собираетесь проанализировать? В C или C++ у Вас не будет синтаксического анализатора во времени выполнения, поэтому это не доступно без дополнительной библиотеки. Для многих языков программирования это верно все же.
Все синтаксические анализаторы являются по умолчанию 'динамичными' при реализации их. Даже в C.
Если язык, который Вы собираетесь проанализировать, является Вашим собственным: запись синтаксических анализаторов является вещью учиться самостоятельно. Даже с парсерами-генераторами это - работа сам по себе. После изучения этого, хотя, это станет довольно простым все же. Специальные приемы как синтаксис с отступом все еще будут хитры, хотя, и Вы потребуете, чтобы хорошие и обширные тесты видели, что синтаксический анализатор делает то, что Вы хотите. Я записал синтаксический анализатор, таким образом, я знаю.