Кружок прокручивыемый курсором мыши
Кружок прокручивыемый курсором мыши. По сути как регулятор громкости и т. п.
Сделать имитацию прокрутки картинки не проблема. 1. Использование около 10 разных положений заранее подготовленных в фотошопе. 2. Использование сanvas. Проблема с виртуальным невидимым кружком, который по сути есть движок управляемый курсором - с нуля писать дорогое удовольствие. Если кто-нибудь встречал подобные алгоритмы, плагины, прошу поделиться. |
<html><head><title>Seek Bar</title></head>
<body>
Реализация SeekBar'а с использованием встроенного svg:
<div>
<svg id='svgim' xmlns="http://www.w3.org/2000/svg" width='320px' height='240px'
onmouseout='document.getElementById("seekHide").setAttribute("begin", (this.getCurrentTime() + 1.1) + "s")'
onmousemove='document.getElementById("seekSet").setAttribute("begin", (this.getCurrentTime() + 0.1) + "s")'>
<defs>
<linearGradient id='seekBar' x1='50%' y1='0%' x2='50%' y2='100%'>
<stop offset='0%' stop-color='gray'/>
<stop offset='80%' stop-color='silver'/>
</linearGradient>
<linearGradient id='seekSlot' x1='50%' y1='0%' x2='50%' y2='100%'>
<stop offset='0%' stop-color='silver'/>
<stop offset='80%' stop-color='gray'/>
</linearGradient>
<radialGradient id="seekButton" gradientUnits="objectBoundingBox" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" stop-color="white" />
<stop offset="50%" stop-color="gray" />
<stop offset="100%" stop-color="white" />
</radialGradient>
</defs>
<path id='circlePath' d='M0,0 a64,64 0 1 1 -1,0'/>
<linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='100%' r='100%' fx='75%' fy='65%'>
<animate fill='freeze' begin='0s' dur='5s' attributeName='x1' attributeType='XML' repeatCount='10'>
<mpath xlink:href='#circlePath'/>
</animate>
<stop offset="0%" stop-color="blue"/>
<stop offset="20%" stop-color="red"/>
<stop offset="30%" stop-color="orange"/>
<stop offset="40%" stop-color="yellow"/>
<stop offset="50%" stop-color="green"/>
<stop offset="60%" stop-color="deepskyblue"/>
<stop offset="70%" stop-color="blue"/>
<stop offset="80%" stop-color="purple"/>
<stop offset="100%" stop-color="white"/>
</linearGradient>
<pattern id='rating' x='0px' y='0px' width='128px' height='128px'
patternUnits='userSpaceOnUse'
patternUnit='objectBoundingBox'>
<circle cx='64px' cy='64px' r='64px' fill='url(#grad)'>
</circle>
</pattern>
<g>
<circle cx="20px" cy="20px" r="100px" fill='url(#rating)'>
<animateMotion fill='freeze' begin='0s' dur='1s' repeatCount='13.25'>
<mpath xlink:href='#circlePath'/>
</animateMotion>
</circle>
</g>
<g width='320px' height='32px' fill='red'>
<rect x='0px' y='0px' width='320px' height='16px' fill='url(#seekBar)'/>
<rect x='4px' y='4px' width='312px'' height='8px' fill='url(#seekSlot)'
onmousedown='this.viewportElement.setCurrentTime((evt.clientX - 0) / 320 * 14)'/>
onmouseout='document.getElementById("seekHide").setAttribute("begin", (this.getCurrentTime() + 2) + "s")'
onmouseover='document.getElementById("seekHide").setAttribute("begin", (this.getCurrentTime() - 2) + "s"); document.getElementById("seekSet").setAttribute("begin", (this.getCurrentTime() + 0) + "s")'>
<circle cx='0px' cy='8px' r='4px' stroke='none' fill='url(#seekButton)'>
<animateMotion dur='14s' from='4,0' to='316,0' fill='freeze' repeatCount='1'/>
</circle>
<animateMotion begin='0s' dur='0.001s' to='0,0' fill='freeze' repeatCount='1'/>
<animateMotion id='seekSet' begin='13.4s' to='0,0' fill='freeze' repeatCount='1'/>
<animateMotion id='seekHide' begin='14s' dur='0.75s' to='0,-16' fill='freeze' repeatCount='1'/>
</g>
</svg>
</div></body>
|
Цитата:
три точки есть. центр изображения(половина ширины,половина высоты),12 часов(половина ширины изображения по х и соответственно 0 по у),и координата курсора-хватает чтоб вычислить и длины сторон в треугольнике и необходимый угол-теорема косинусов. какой здесь сложный движок-при нажатой кнопке определить положение курсора(при его муве и расчитать угол)? помниться в 20 строк кода на подобном влез Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 14:08. |