Canvas 2D API 的新想法就在規範本身裡面

上次在 WHATWG 的郵件群看到有人對 Canvas 2d API 的建議，後來我問了一下
WHATWG 的朋友們才發現 WHATWG 版本的各個規範裡其實有用註解紀錄一些從各個
地方來的新想法，大致的格式是：

   <!-- vN 新想法-->

其中 N 是一個數字。我把關於 Canvas 2D Context[1] 的部份節錄下來，裡面竟
然還不少豎排的部份，求翻譯！另外也歡迎大家嘗試這些新功能的兼容實作。（話
說，DVT 是什麼意思？）

[1]
http://www.whatwg.org/specs/web-apps/current-work/complete/the-canvas-element.html

<!--
  // v6 we've also received requests for:
          attribute boolean <span
title="dom-context-2d-forceHighQuality">forceHighQuality</span> //
(default false)
  // when enabled, it would prevent the UA from falling back on
lower-quality but faster rendering routines
  // useful e.g. for when an image manipulation app uses <canvas> both
for UI previews and the actual work
-->

<!--
  // v6 we've also received requests for:
  void skew(...);
  void reflect(...); // or mirror(...)
-->

<!--
  // v6 we've also received requests for:
  - turning off antialiasing to avoid seams when patterns are painted
next to each other
    - might be better to overdraw?
    - might be better to just draw at a higher res then downsample, like
for 3d?
  - nested layers
    - the ability to composite an entire set of drawing operations with
one shadow all at once
     
http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2008-August/015567.html
-->

<!-- v6DVT
  void <span
title="dom-context-2d-fillVerticalText">fillVerticalText</span>(DOMString text,
double x, double y, optional double maxHeight);
  void <span
title="dom-context-2d-strokeVerticalText">strokeVerticalText</span>(DOMString
text, double x, double y, optional double maxHeight); -->

  <!-- v6
idea from Mihai:
> 5. Drawing states should be saveable with IDs, and for easier restoring.
>
> save(id)
> restore(id)
>
> If id is not provided, then save() works as defined now. The same for
> restore().
>
> Currently, it's not trivial to save and restore a specific state.
...and from Philip:
> I think a more convenient syntax would be:
>   var state = ctx.save();
>   ctx.restore(state);
> But how would it interact with normal calls to ctx.restore()?
  -->

  <!-- v6 feature requests:

   * Getting and setting colours by component to bypass the CSS value
parsing.

     Either:
        context.fillStyle.red += 1;

     Or:
        var array = context.fillStyle;
        array[1] += 1;
        context.fillStyle = array;

   * A more performant way of setting colours in general, e.g.:

       context.setFillColor(r,g,b,a) // already supported by webkit

     Or:

       context.fillStyle = 0xRRGGBBAA; // set a 32bit int directly

   * fill rule for deciding between winding and even-odd algorithms.
     SVG has fill-rule: nonzero | evenodd
       http://www.w3.org/TR/SVG/painting.html#FillProperties

  -->

  <!--
   Requests for v6 features:
    * apply transforms to patterns, so you don't have to create
      transformed patterns manually by rendering them to an off-screen
      canvas then using that canvas as the pattern.
  -->

  <!--
v6: dashed lines have been requested. Philip Taylor provides these
notes on what would need to be defined for dashed lines:
> I don't think it's entirely trivial to add, to the detail that's
> necessary in a specification. The common graphics APIs (at least
> Cairo, Quartz and java.awt.Graphics, and any SVG implementation) all
> have dashes specified by passing an array of dash lengths (alternating
> on/off), so that should be alright as long as you define what units
> it's measured in and what happens when you specify an odd number of
> values and how errors are handled and what happens if you update the
> array later. But after that, what does it do when stroking multiple
> subpaths, in terms of offsetting the dashes? When you use strokeRect,
> where is offset 0? Does moveTo reset the offset? How does it interact
> with lineCap/lineJoin? All the potential issues need test cases too,
> and the implementations need to make sure they handle any edge cases
> that the underlying graphics library does differently. (SVG Tiny 1.2
> appears to skip some of the problems by leaving things undefined and
> allowing whatever behavior the graphics library has.)

Another request has been for hairline width lines, that remain
hairline width with transform. ack Shaun Morris.
  -->

 <!-- v6 feature request:
        * points as a primitive shape
          http://home.comcast.net/~urbanjost/canvas/vogle4.html
  -->

  <!-- v6
   Jordan OSETE suggests:
    * support ways of extending the clipping region (union instead of
intersection)
       - also "add", "subtract", "replace", "intersect" and "xor"
    * support ways of resetting the clipping region without save/restore
  -->

<!--v6DVT - this is commented out until CSS can get its act together
enough to actual specify vertical text rendering (how long have we
been waiting now?)

WHEN EDITING THIS, FIX THE PARTS MARKED "&#x0058;&#x0058;&#x0058;" BELOW

  <p>The <dfn
 
title="dom-context-2d-fillVerticalText"><code>fillVerticalText()</code></dfn>
  and <dfn
 
title="dom-context-2d-strokeVerticalText"><code>strokeVerticalText()</code></dfn>
  methods take three or four arguments, <var title="">text</var>, <var
  title="">x</var>, <var title="">y</var>, and optionally <var
  title="">maxHeight</var>, and render the given <var
  title="">text</var> as vertical text at the given (<var
  title="">x</var>, <var title="">y</var>) coordinates ensuring that
  the text isn't taller than <var title="">maxHeight</var> if
  specified, using the current <code
  title="dom-context-2d-font">font</code> and <code
  title="dom-context-2d-textAlign">textAlign</code>
  values. Specifically, when the methods are called, the user agent
  must run the following steps:</p>

  <ol>

   <li><p>If <var title="">maxHeight</var> is present but less than or
   equal to zero, return without doing anything; abort these
   steps.</p></li>

   <li><p>Let <var title="">font</var> be the current font of the
   context, as given by the <code
   title="dom-context-2d-font">font</code> attribute.</p></li>

   <li><p>Replace all the <span title="space character">space
   characters</span> in <var title="">text</var> with U+0020 SPACE
   characters.</p></li>

   <li><p>Form a <em class="&#x0058;&#x0058;&#x0058;">whatever CSS ends
up calling
   vertical line boxes and inline boxes</em> containing the text <var
   title="">text</var>, with all the properties at their initial
   values except the 'font' property of the inline box set to <var
   title="">font</var> and the 'direction' property of the inline
   box set to <span>the directionality</span> of the <code>canvas</code>
   element.</p></li>

   <!- - if you insert a step here, make sure to adjust the next step's
   final words - ->

   <li><p>If the <var title="">maxHeight</var> argument was specified
   and the hypothetical height of the <em
class="&#x0058;&#x0058;&#x0058;">box</em>
   in the hypothetical line box is greater than <var
   title="">maxHeight</var> CSS pixels, then change <var
   title="">font</var> to have a more condensed font (if one is
   available or if a reasonably readable one can be synthesized by
   applying an appropriate scale factor to the font) or a smaller
   font, and return to the previous step.</p></li>

   <li>

    <p>Let the <var title="">anchor point</var> be a point on the <em
    class="&#x0058;&#x0058;&#x0058;">inline box</var>, determined by the
<code
    title="dom-context-2d-textAlign">textAlign</code>, as follows:</p>

    <p>Vertical position:</p>

    <dl>

     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">start</code></dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">left</code> and <span>the directionality</span> of the
     <code>canvas</code> element is 'ltr'</dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">right</code> and <span>the directionality</span> of the
     <code>canvas</code> element is 'rtl'</dt>

     <dd>Let the <var title="">anchor point</var>'s vertical
     position be the top edge of the <em
class="&#x0058;&#x0058;&#x0058;">inline
     box</em>.</dd>

     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">end</code></dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">right</code> and <span>the directionality</span> of the
     <code>canvas</code> element is 'ltr'</dt>
     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">left</code> and <span>the directionality</span> of the
     <code>canvas</code> element is 'rtl'</dt>

     <dd>Let the <var title="">anchor point</var>'s vertical
     position be the bottom edge of the <em
class="&#x0058;&#x0058;&#x0058;">inline
     box</em>.</dd>


     <dt> If <code
     title="dom-context-2d-textAlign">textAlign</code> is <code
     title="">center</code></dt>

     <dd>Let the <var title="">anchor point</var>'s vertical position
     be half way between the top and bottom edges of the <em
     class="&#x0058;&#x0058;&#x0058;">inline box</em>.</dd>

    </dl>

    <p>Let the horizontal position be half way between the left and
    right edges of the em box of the first available font of the <em
    class="&#x0058;&#x0058;&#x0058;">inline box</em>.</p>

   </li>

   <li>

    <p>Paint the hypothetical inline box as the shape given by the
    text's glyphs, as transformed by the <span
    title="dom-context-2d-transformation">current transformation
    matrix</span>, and anchored and sized so that before applying the
    <span title="dom-context-2d-transformation">current transformation
    matrix</span>, the <var title="">anchor point</var> is at (<var
    title="">x</var>, <var title="">y</var>) and each CSS pixel is
    mapped to one coordinate space unit.</p>

    <p>For <code
    title="dom-context-2d-fillVerticalText">fillVerticalText()</code>
    <code title="dom-context-2d-fillStyle">fillStyle</code> must be
    applied and <code
    title="dom-context-2d-strokeStyle">strokeStyle</code> must be
    ignored. For <code
    title="dom-context-2d-strokeVerticalText">strokeVerticalText()</code>
    the reverse holds and <code
    title="dom-context-2d-strokeStyle">strokeStyle</code> must be
    applied and <code
    title="dom-context-2d-fillStyle">fillStyle</code> must be
    ignored.</p>

    <p>Text is painted without affecting the current path, and is
    subject to <span title="shadows">shadow effects</span>, <span
    title="dom-context-2d-globalAlpha">global alpha</span>, the <span
    title="clipping region">clipping region</span>, and <span
    title="dom-context-2d-globalCompositeOperation">global composition
    operators</span>.</p>

   </li>

  </ol>

v6DVT (also check for '- -' bits in the part above) -->

  <!-- v6: Drawing text along a given path -->
  <!-- v6: Adding text to a path -->
  <!-- see also:
http://www.w3.org/TR/SVG11/text.html#TextpathLayoutRules -->
  <!-- see also:
http://developer.mozilla.org/en/docs/Drawing_text_using_a_canvas -->

<!-- v3: drawImage() of an ImageData object might make sense (when
resizing as well as filtering) - ack Charles Pritchard -->


歡迎大家繼續分享有關規範的種種訊息！

Kenny

Received on Thursday, 22 September 2011 09:48:42 UTC