ein Bild von CSS erstellen

Ich versuche, das nächste, was in CSS zu tun:ein Bild von CSS erstellen

enter image description here

, wenn der Benutzer über auf das gesamte Bild mit seiner Maus,

die CSS wäre geändert:

enter image description here

in Bild Nummer 2 und 3, ich habe ihn zu ermöglichen, die kleinen Kreise zu drücken. Ich habe es aktiviert.

enter image description here

ich nicht gelungen, die blaue Linie aus dem kleinen Kreis zu starten (wie in Bild 1):

diese blaue Linie nach links oder nach rechts gehen kann eine gegebene Eingabe (100 färbt die ganze rechte graue Form. -100 färbt alle die linke graue Form. In diesem Beispiel nehme ich an, dass der Benutzer den Parameter einfügt: 25. und dann wurde das Viertel der rechten grauen Form gefärbt)

kann mir bitte jemand dabei helfen?

die blaue Linie ist in der Klasse PersonaCanvasMini und es genau wie PersonaCanvas

jede Hilfe dankbar!

hier ist mein jsfiddle:

http://jsfiddle.net/kyfha/74/

das ist mein html:

<div id="goalDetails" onmouseOver="addDetails();" onmouseout="removeDetails();"> 

    <div class="PersonaCanvas"> 
     <div class="smallCircle" onclick="showProjection();"></div> 
     <div id="smallestCircle" style="display: none" onclick="showBurnRate();"></div> 
    </div> 

    <div id="details" style="display: none"> 
     <div id="dolarsDetails">77$</div> 
     <div id="projOrBurn">Projection</div> 
    </div> 

    <div id="mainShape" class="bigCircle"> 
     <div id="cpaDetails">7.03</div> 
    </div> 

    <div class="PersonaCanvasMini"></div> 
    <div id="mainLine" style="display:none"></div> 
    <div id="secondaryLine" style="display:none"></div> 
</div>

und meine CSS ist in der jsfiddle.

Quelle

2013-12-11 Alon Shmiel

Ihre Geige hat keine js. Ich würde denken, dass Sie css und js nicht kombinieren müssten, um die gewünschten Effekte zu erzielen. – DrCord

@DrCord Ich lege es in den HTML-Bereich. Vielen Dank. –

Was lässt Sie denken, dass CSS die geeignetste Technologie dafür ist? CSS ist keine Grafiksprache; es ist eine Layoutsprache. Hast du Alternativen wie SVG in Betracht gezogen? Ich kann mit einiger Sicherheit sagen, dass dies in SVG einfacher zu erreichen ist als CSS, insbesondere die Aspekte der Maussteuerung. HTML Canvas ist eine weitere Option, die Sie ebenfalls berücksichtigen sollten. Es gibt viele JS-Bibliotheken für SVG und Canvas, die dies wirklich einfach machen. – Spudley

Alon, was Sie erreichen möchten, kann entweder mit jQuery + CSS erfolgen ODER es wäre besser, die Kineticjs Javascript-Bibliothek für die Arbeit mit HTML-Canvas zu verwenden. Wenn Sie Echtzeitdaten an Ihre Grafik binden müssen, sollten Sie Angularjs in Verbindung mit Kineticjs ODER mit jQuery verwenden (wenn Sie es nicht vermeiden können).

Hinweis .. Kineticjs ist sehr einfach zu erlernen und zu bedienen, und ich würde Sie damit anfangen vorschlagen: http://www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

Quelle

2013-12-14 06:55:18 GRowing

ein Bild von CSS erstellen

Antwort

Verwandte Themen